[JavaScript] 생성자 함수

자바스크립트에서 객체를 여러개 만들 때, 유의해야 할 점은 실수로 프로퍼티의 오타나 생략했을 때 다른 객체가 생성된다.

 

🔻일반적인 객체 생성

        o1.name = '홍길동';
        o1.hello = function() {
            console.log('hello');
        };

        o2.name = '아무개';
        o2.hllo = function() {
            console.log('안녕');
        }

위 코드의 문제점은 오타를 내도 제어하지 못한다는 것이다.

o2의 hello를 hllo로 잘못 작성하여 o1과 o2는 다른 객체로 생성되었다.

객체를 여러개 만들 때, 유의해야 할 점은 프로퍼티의 오타나 생략했을 때 다른 객체가 생성된다.

 

생성자 함수는 이 점을 보완할 수 있다.

 

🔻생성자 함수

• 자바의 클래스 개념을 가지고 있다.
• 자바의 생성자 생성 방법과 유사하며, 자바스크립트는 멤버 변수 선언이 없다.
• 생성자 함수를 사용하면, 이미 한번 프로퍼티 정의하여 매개변수만 넣고 사용하기에 실수할 가능성이 적다. 
• 일반 함수와 구분하기 위해 함수명을 파스칼 표기법으로 작성한다. 에러는 나지않지만 암묵적인 룰이다.

    <script>
        function User(name, age) {
            this.name = name;
            this.age = age;
        }

        User('홍길동', 20);
    </script>

자바스크립트의 객체는 기존 존재 유무와 상관없이 프로퍼티로 사용 가능하다.

name, age는 존재하지않았지만 코드를 실행함에 따라 동적으로 생성되었다.

 

User('홍길동', 20);

그냥 생성자 함수를 호출했을 때와 new 연산자와 함께 호출한 생성자함수는 실행 후 결과가 다르다.

그냥 생성자 함수로 호출했을 때는 this가 window 객체를 의미하므로 위 코드로 생성한 User는 window의 객체로 생성된다.

new 연산자와 함께 호출한 생성자 함수는 new Object()와 같은 의미가 된다

객체로 사용하기 위해서는 생성자 함수는 절대로 일반 함수처럼 그냥 호출하면 안된다.

 

new 연산자

생성자 함수는 반드시 new 연산자와 같이 사용해야 한다.

new User('홍길동', 20);

틀을 만들어 객체를 생성하는 느낌을 준다.

 

 

 

 

인텔리센스가 뜨는 프로퍼티들은 객체 안에서 이미 정의된 것들이다.

 

 

배열

자바스크립트는 배열의 개념이 없다. 그래서 배열의 인덱스는 사실 객체의 프로퍼티이다.

    <script>
        const list = new Array();

        list[0] = 10;
        list[2] = 30;

        console.log(list[1]);       //undefined
    </script>

예를들어 위 코드의 경우 list[1]의 초기화를 하지않고 콘솔창으로 출력했을 때, 에러가 나지 않고 undefined가 출력된다.

프로퍼티 1에 할당된 값이 없어 undefined로 출력된다.

 

    <script>
        const hong = {};

        //정의되지 않은 속성
        console.log(hong.name);     //undefined

        //정의되지않은 변수
        console.log(height);    //height is not defined

    </script>

정의되지않은 속성은 undefined로 출력되고, 정의되지않은 변수는 에러가 난다.

 

        const arr = {
            0: '사과',
            1: '귤',
            2: '바나나',
            length : function() {
                return: 3
            }
        };

배열의 구성은 위 코드와 같이 정의된 생성자 함수이다.

따라서 자바스크립트의 객체는 기존 존재 유무와 상관없이 프로퍼티로 사용 가능한 특성에 따라 프로퍼티가 정의되지않고 호출해도 에러나지않는다.

 

Date, Array

        const desk = {};
        const today = new Date();
        const arr2 = new Array();

        console.log(typeof desk);   //object
        console.log(typeof today);   //object
        console.log(typeof arr2);   //object

Date, Array도 new로 생성하기에 object로 생성된다. typeof로 확인해봤을 때 object라고 출력되는 것을 볼 수 있다.

자바스크립트는 객체는 무조건 object이다.

 

 

동일한 object이지만 구체적으로 확인하고자하면 생성자 함수의 이름을 확인할 수 있다.

console.log(today.constructor.name);	//Date

constructor.name 으로 클래스 이름을 알아낼 수 있다.

 

 

        const arr3 = new Array();
	list3[0] = '강아지';
        list3[1] = '고양이';
        list3.address = '서울시 강남구';
        list3.check = function() {
            alert('체크완료');
        }

위 코드는 Array object에 address, check 프로퍼티 추가한 것이다.

배열과 상관없는 기능이지만 object 특성으로 가능하다

(기능 추가할 때 이런식으로 사용하기도 한다.)

 

---

🔻this

상황에 따라 의미가 상이해진다.

호출한 곳의 객체라고 생각하면 된다.

익명 함수 사용

        const o5 = {
            name: '홍길동',
            age: 20,
            info : function() {
                // console.log(name, age);      //age is not defined
                console.log(this.name, this.age);
            }
        };

        o5.info();  //홍길동 20

생성자 함수에 익명 함수를 사용할 때는 반드시 this 키워드를 붙여줘야한다.
사용하지 않으면 지역변수로 인식하기에 에러가 난다.

 

생성자 함수 내에서 익명 함수를 정의할 때는 생성자 함수 내에서만 사용하기에 this는 객체 o5를 의미한다. 

 

실명 함수 사용

        const o6 = {
            name: '호호호',
            age: 23,
            info: m1
        };

        function m1() {
            console.log(this.name, this.age);
        }

        o6.info();  //호호호 23

생성자 함수 내에 실명 함수를 호출하였으니, 이 때 this는 객체 o6를 의미한다.

 

m1();   //undefined

하지만, m1 만 호출하게 되면 결과가 다르게 출력된다.

 

        function m1() {
            console.log(this.name, this.age);
        }

전역 함수는 window의 프로퍼티이다.

m1은 o6의 종속된 함수가 아니라 전역 함수이기에  m1만 호출 할 때의 this는 o6를 의미하는 것이 아니므로 사용할 때 주의해야한다.