2023.04.06 사용자 정의 함수,객체,상속

목차

1. JavaScript의 사용자 정의함수

• 함수를 만드는 방식 2가지
  • 함수 선언식
  • 함수 표현식
• 디폴트 매개변수
• 나머지 매개변수
• 호이스팅
• 화살표함수

2. JavaScript의 객체

• 프로퍼티
• 객체를 생성하는 방법
  • 리터럴 표기법
  • 생성자 이용
  • 클래스 이용

3. JavaScript의 상속

• 프로토타입

---

1. JavaScript의 사용자 정의함수

• 하나의 특별한 목적의 작업을 수행하도록 독립적인 블록을 함수라 한다.
• 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음
• 코드를 재활용 하기 위함
• 매개변수가 있는데 보내지 않으면 undefined가 반환 된다. 
   

1-1. 함수를 만드는 방식 2가지 

  - 매개변수를 전달 할때 타입을 전달해주지 않아도 잘 보내진다. 

 🔴 함수 선언식 

    function 함수명(매개변수1, 매개변수2....){
        함수가 호출되었을때 실행할 문장;
        ....
        ....
        return 값;
    }

🔹 호출법 

        함수명(값1, 값2, ...); // 값이 보내지 않을때 undefined

 

👀 예제)

    function func1(){
        console.log('func1() 호출 되었다.');
    }

    func1();

 

---

🔴 함수 표현식 (✔ 표현식을 많이 볼 수 없지만 더 권장한다.[호이스팅 때문에])

    const 변수명 = function(매개변수1, 매개변수2, ....){
        함수가 호출 되었을떄 실행할 문장;
        ....
        ....
        return 값;
    }

🔹 호출법 

        함수명(값1, 값2, ...);

👀 예제)

        //매개변수가 존재 하는 
        function func2(num){
            console.log(`전달받은 매개변수 값: ${num}`);
        }

        func2();        // undefined
        func2(10);      // 숫자 10
        func2('apple'); // 문자열 
        func2(true);    // boolen

        // 매개변수가 2개인 경우, 시작부터 끝 숫자 합계구하기
        function func3(start, end){
            let sum = 0;
            for(let i = start; i <= end; i++){
                sum += i;
            }
            console.log(`${start}부터 ${end}까지의 총합: ${sum}`);
        }

        func3(1,100);   //10~100까지의 합 5050
        func3(10);      //10~undefined 까지의 합 0 end가  undefined이기 때문에 for문이 돌지 않아서 초기값 sum=0이 출력된다. 

        function func4() {
            return '🎁';            
        }

        func4(); // 자바스크립트는 print를 자동으로 해주지 않는다. 
        console.log(func4); //메모리 주소값만 보여주게 된다. 
        console.log(func4());

        const presents = func4(); // 변수에 func4의 반환값을 저장하고 프린트
        console.log(presents);

---

1-2. 디폴트 매개변수

• 매개변수의 값을 설정 하는 것
• 매개변수의 값을 정하지 않으면 기본값을 변수에 저장 

🔴 형태

        function 함수명(매개변수1=값1, 매개변수2=값2, ...){
            함수가 호출되었을때 실행할 문장;
            ....
            ....
            return 값;
        }

🔹 호출법

        함수명();
        함수명(값1,값2,....);

👀 예제)

        function func5(num1 = 1, num2 = 1){
            console.log(`num1: ${num1}, num2 : ${num2}`);
            console.log(`${num1} * ${num2} = ${num1*num2}`);
        }

        func5();
        func5(10, 3);
        console.log('---------------------');

---

1-3. 나머지 매개변수 

• 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있다. 

🔴 형태

        function 함수명(매개변수1, ...매개변수2){
            함수가 호출되었을때 실행할 문장;
            ....
            ....
            return 값;
        }

🔹 호출법

        함수명();
        함수명(값1, 값2, 값3, 값4, 값5, 값6);

👀 예제)

        function func6(...x) {
            console.log(`x의 값:${x}`);
            console.log(`x의 타입:${typeof(x)}`);

            for (i in x){
                console.log(`i :${i}, x[${i}]: ${x[i]}`);
            }
        }

        func6(30, 40, 70); // 값 : 30, 40, 70 // 타입 : object

        function func7(x1, ...x2) {
            console.log(`x1의 값:${x1}`);
            console.log(`x2의 값:${x2}`);
            
        }

        func7(30, 40, 70); // x1 : 30, x2 : 40, 70

---

👀 보너스 예제)

- 함수를 만들면서 바로 호출 하는 방법 !!

        // 보너스 !!
        // 함수를 만들면서 바로 호출 하는방법 !
        (function func8() {
            console.log('함수를 만들고 바로 호출합니다. ');
        })();
        (function () {
            console.log('익명함수를 만들고 바로 호출합니다. ');
        })(); // 이렇게 사용시 함수명 없이 익명으로도 사용 가능하다

---

1-4. 호이스팅(hoisting)

- 인터프리터가 변수와 함수를 메모리 공간을 선언 전에 미리 할당하는 것 
- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
- let, const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음

 

   예)
   
   
	함수 정의                               		인터프리팅 결과               
    func1();                                		function func1(){
    ...                     함수호이스팅         	....;
    ...                     ---->           		}
    ...                                     		func1();  
    ...                                     		....
    ...                                     		....
    function func1(){
        ....;
    }

    func2();                                		let func2;
    let func2 = function(){                 		func2(); // 에러발생
        ......;                             		function func2(){
    }                                             	.....;
                                            		}

👀 예제) 코드 자체를 확인해야함... !!

<body>
    <h2>호이스팅</h2>
    <script>
        func1(); // 잘됨
        func2(); // 에러 발생 

        // 함수로 선언 되었기 때문에 호이스팅시 위로 끌어올려준다.
        function func1(){
            alert('func1 호출!');
        }

        // 변수로 선언 되었기 때문에 호이스팅시 위로 끌고 올라가지 못한다.(이 경우는 <head>에 만들어 놓고 <body>에서 쓰는것도 괜찮다.)
        let func2 = function() {
            alert('func2 호출!');
        }

        // 호출 잘됨
        func1();
        func2();
    </script>
</body>

---

1-5. 화살표 함수 

• 최근 사용하는 추가된 문법
• function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
• 화살표 함수는 항상 익명으로 사용된다.(표현식을 사용합니다.)

🔴 형태

     🔹 매개변수가 없을 경우

const 함수명 = () => {
    함수가 호출 되었을 때 실행될 문장 ;
    ...
    ...
}

  - 한줄표기 
  const 함수명 = () => 함수가 호출 되었을 때 실행될 문장 ;

👀 예제)

        // 매개변수 없는 한줄 표기 
        const func1 = () => console.log('안녕하세요. 자바스크립트');
        func1();

---

     🔹 매겨변수가 있을 경우

const 함수명 = (매개변수1, 매개변수2, .......) => {
    함수가 호출 되었을 때 실행될 문장 ;
    ...
    ...
}

  - 한줄표기 
  const 함수명 = (매개변수1, 매개변수2, .....) => 함수가 호출 되었을 때 실행될 문장 ;

👀 예제) 매개변수가 2개일때, 삼항연산자를 이용해 사용하기 

        // 매개변수 2개일 때,
        const func2 = (x,y)=> console.log(`두수의 합: ${x+y}`);
        func2(10, 3);

        // 파이썬의 람다함수와 살짝 비슷한 형태 
        // 매개변수를 받아 리턴 해줄수 있다. 
        const func3 = x => x * x;
        const reuslt = func3(10);
        console.log(`10의 제곱 : ${reuslt}`);

        const func4 = (x, y) =>{
            let sum = 0;
            for(let i = x; i <= y; i++){
                sum += i;
            }
            return sum;
        }
        const total = func4(1,100);
        console.log(`1부터 100까지의 합: ${total}`);
        console.log('-----------');

        // age를 입력받아서 화살표함수에 삼항연산자 사용해보기 
        let age = prompt('나이를 입력하세요. ');
        const isAdult = (age > 19) ? () => console.log('성인입니다. ') : () => console.log('미성년입니다.');
        isAdult();
        console.log('-----------');

    ✔ 매개변수가 1개인 경우 소괄호()를 생략가능하다.

    const 함수명 = 매개변수1 => 함수가 호출 되었을 때 실행될 문장 ;

---

2. JavaScript의 객체(Object)

- 하나의 주제를 가지고 관련있는 프로퍼티를 가지고 있는 집합.

 

2-1. 프로퍼티(property) - (파이썬에서 self와 비슷하다.)

  - 이름과 값으로 구성된 정렬되지 않은 집합
  - 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메소드

 

2-2. 객체를 생성하는 방법

 1. 리터럴 표기법

const 객체명 = {	
    프로퍼티명1: 값1,
    프로퍼티명2: 값2,
    ....

    프로퍼티명n: function(){
        프로퍼티가 호출되면 실행할 문장;
        ....
    }
}

👀 예제) 리터럴 표기법 객체생성과 접근법들

        // 리터럴 표기법
        const dog = {
            name:'루시',
            age:13,
            color: 'white',
            birthday: '20091210',
            getBirthday: function(){
                return this.birthday;
            }
        }

        // . 으로 접근법
        console.log(dog.name);
        console.log(dog.age);
        console.log(dog.color);
        console.log(dog.birthday);
        console.log(dog.getBirthday());
        console.log('-----------');

        // 프로퍼티명으로 접근법
        console.log(dog['name']);
        console.log(dog['age']);
        console.log(dog['color']);
        console.log(dog['birthday']);
        console.log(dog.getBirthday());
        console.log('-----------');

        // for in 문 사용해보기
        for(let i in dog){
            console.log(`i:[i], dog[${i}]:${dog[i]}`);
        }
        console.log('-----------');

---

 2. 생성자를 이용

 - 객체를 만드는 함수라고 생각하면 됩니다.(함수인지 객체인지 헷갈린다!)

 

🔴 형태

    function 생성자명(매개변수1, 매개변수2, ....){
        this.프로퍼티명1 = 값1;
        this.프로퍼티명2 = 값2;
        ...
        ...
        this.프로퍼티명n = function(){
            프로퍼티가 호출되면 실행할 문장;
            ....
        }


    }    

	// 객체 생성
    const 객체명1 = new 생성자명(값1, 값2, ....);
    const 객체명2 = new 생성자명(값1, 값2, ....);
    .....
    const 객체명n = new 생성자명(값1, 값2, ....);

 

    - new 연사자를 사용하여 객체를 생성하고 초기화할 수 있음
    - 객체를 생성할 때 사용하는 함수를 생성자라고 함
    - 새롭게 생성되는 객체를 초기화하는 역할
    - 같은 형태의 객체를 여러개 생성할 때 유리하다.

 

👀 예제)

        //생성자를 이용한 객체 만들기
        function Dog(name, color){
            this.name = name;
            this.color = color;
            this.eat = function(){
                return `${this.name}는 먹습니다.`;
            }
        }

        //Rucy 객체 생성
        const Rucy = new Dog('루시', '화이트');
        console.log(Rucy.name);
        console.log(Rucy.color);
        console.log(Rucy.eat());
        console.log('*********');

        //PPomi 객체 생성
        const PPomi = new Dog('뽀미', '화이트');
        console.log(PPomi.name);
        console.log(PPomi.color);
        console.log(PPomi.eat());
        console.log('-----------');

---

 3. 클래스를 이용

    - 전통파 개발자들이 만듦
    - ECMA Script6에 추가된 객체 생성 방법
    - 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동된다.

 

 

🔴 형태

    const 클래스명 = class {
        constructor(매개변수1, 매개변수2,....){
            this.프로퍼티명1 = 값1;
            this.프로퍼티명2 = 값2;
            ....
        }
        메소드명(매개변수1, 매개변수2, ....){
            메소드가 호출되면 실행할 문장 ;
            .....
        }
    }
	//객체 생성
    const 객체명1 = new 클래스명(값1,값2, ...);
    const 객체명2 = new 클래스명(값1,값2, ...);
    .........
    const 객체명n = new 클래스명(값1,값2, ...);

👀 예제)

        //클래스 이용한 객체 생성
        const User = class {
            constructor(userid, name, age){
                this.userid = userid;
                this.name = name;
                this.age = age;
            }
            getUserid(){
                return `아이디는 ${this.userid} 입니다.`;
            }
        }

        const apple = new User('apple', '김사과', 20);
        console.log(apple.userid);
        console.log(apple.name);
        console.log(apple.age);
        console.log(apple.getUserid());

---

3. JavaScript의 상속

 - 클래스 기반의 객체지향 언어와 다르다.
 - 자바스크립트는 프로토타입 기반의 객체 지향 언어

 ✔프로토타입(prototype)

  - 모든 객체는 프로토타입이라는 객체를 가지고 있다. 
  - 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받게 된다. 
  - 모든 객체는 최소한 하나 이상의 다른 객체로 부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토 타입이라고 정의한다. 

 

🔴 형태

        const dog = Dog(); //객체가 만들어질때 Dog.prototype, Object.prototype 두개다 상속받는다.

👀 예제)

        //프로토타입 생성.
        Dog.prototype.birthday = '20091210';// 프로토타입 생년월일 만들기
        Dog.prototype.run = function(){ 
            return this.name+'는 달립니다. ';
        }

        console.log(`day : ${Rucy.birthday}`);
        console.log(`run : ${Rucy.run()}`);

        console.log(`day : ${PPomi.birthday}`);
        console.log(`run : ${PPomi.run()}`);

---