01. object-constructor

01_object-constructor-function

object-constructor-function

object 생성자 함수
new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.

// 빈 객체 생성
const student = new Object();

// 프로퍼티 추가
student.name = '유관순';
student.age = 16;

console.log(student);

02. constructor-function

01_constructor-function(생성자 함수)

객체 리터럴을 이용한 객체 생성 방식은 직관적이고 간편하지만, 단 하나의 객체만 생성하므로 동일 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술하므로 비효율적이다.

객체 리터럴 생성

const student1 = {
    name : '유관순',
    age : 16,
    getInfo () {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
};

const student2 = {
    name : '홍길동',
    age : 20,
    getInfo () {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
};

const student3 = {
    name : '선덕여왕',
    age : 30,
    getInfo () {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
};

생성자 함수에 의한 객체 생성
객체를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 생성할 수 있다.

인스턴스 : 객체 모델(function Student)을 바탕으로 만든 하나의 객체를 => instance 객체(student4, student5)

function Student(name, age) {
    // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
}

// 인스턴스의 생성 (new 연산자 사용)
const student4 = new Student('장보고', 35);
const student5 = new Student('신사임당', 40);

console.log(student4);
console.log(student5);

02_instance-creation-process(인스턴스 생성 과정)

인스턴스 생성 과정

function Student(name, age) {

    // 1. 암묵적으로 인스턴스가 생성 되고 this에 바인딩 되는 과정이 런타임 이전에 실행 된다.
    console.log(this);
    // 2. this에 바인딩 되어 있는 인스턴스를 초기화 한다.
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
    // 3. 완성 된 인스턴스가 바인딩 된 this가 암묵적으로 반환된다.(생성된 인스턴스의 (주소)값이 반환된다.)
    // return {};
    // 만약 명시적으로 '객체'를 반환하면 암묵적인 this 반환이 무시된다.
    // return 1;
    // 하지만 명시적으로 '원시값'을 반환하면 무시되고 this가 반환된다.
    // 생성자 내부에서 return은 생략하는 것이 기본이다.
}

const student = new Student('홍길동', 20);
console.log(student);

03_differences-from-regular-function(일반 함수와의 차이점)

일반 함수와의 차이점

function Student(name, age) {
    console.log(this);
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
}

일반 함수와 생성자 함수의 형식적인 차이는 없다. (첫문자를 대문자로 기술하여 구별하려 노력한다.) 단, new 연산자와 함께 호출할 때 생성자 함수로 동작하며 만약 new 연산자와 함께 호출하지 않으면 일반 함수로 동작한다.

const student = Student('강감찬', 35);
// 일반 함수로 호출 된 Student는 반환문이 없으므로 undefined를 반환
console.log(student);
// 일반 함수로 호출 된 Student 내의 this는 전역 객체를 가리킴
console.log(age);
console.log(name);
console.log(getInfo());

생성자 함수가 new 연산자 없이 호출 되는 것을 방지하기 위해 ES6에서는 new.target을 지원한다. new 연산자와 함께 생성자 함수로서 호출 되면 함수 내부의 new.target은 함수 자신을 가리킨다. new 연산자 없이 일반 함수로 호출 된 함수 내부의 `new.target`은 undefined이다. ``` function Dog(name, age) {

if(!new.target) {
    // new 연산자와 함께 호출 되지 않은 경우 undefined이므로 
    // new 연산자와 함꼐 생성자 함수를 재귀 호출 하여 생성 된 인스턴스를 반환
    return new Dog(name, age);
}

this.name = name;
this.age = age;

}

// new 연산자 없이 호출해도 new.target을 통해 생성자 함수로서 호출 된다.
const dog = Dog('뽀삐', 3);
console.log(dog);

<br>
대부분의 빌트인 생성자 함수(Object, String, Number, Boolean, Date, ...)는
new 연산자와 함께 호출 되었는지 확인 후 적절한 값을 반환한다.
String, Number, Boolean의 경우 new 연산자 없이 호출하면 객체 값이 아닌 문자열, 숫자, 불리언 값(원시 값)을 반환한다. 이를 데이터 타입 변환에 활용하는 것이다.