자바스크립트는 프로토타입 기반 객체지향 언어로 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴 (가장 일반적이고 간단한 방법)
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

생성자 함수를 사용하여 객체를 생성하는 방식에 대해 알아보자.

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수이다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다.

객체 리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.

const circle1 = {
    radius: 5,
    getDiameter() {
        return 2 * this.radius;
    }
};
console.log(circle1.getDiameter()); // 10

const circle2 = {
    radius: 10,
    getDiameter() {
        return 2 * this.radius;
    }
};
console.log(circle2.getDiameter()); // 20

생성자 함수에 의한 객체 생성 방식의 장점

생성자 함수에 의한 객체 생성 방식은 클래스처럼 사용되며 프로퍼티 구조가 동일한 객체(인스턴스) 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Circle(radius) {
    // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
}

// 인스턴스의 생성
const circle1 = new Circle(5);  // 반지름이 5인 Circle 객체를 생성
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

생성자 함수는 일반 함수와 동일한 방법으로 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다.

생성자 함수 생성 시 주의할 점

• 생성자 함수는 함수 선언문 또는 함수 표현식으로 정의해야한다.
• 함수 내부에 정의된 함수도 생성자 함수가 될 수 있다.
• 생성자 함수는 화살표 함수로 정의할 수 없다.
• ES6의 메서드 축약 표현으로 정의된 메서드는 생성자 함수가 될 수 없다.
• 생성자 함수는 첫 문자를 대문자로 명명하여 일반 함수와 구별한다.
• 생성자 함수 내부에서 return문은 반드시 생략한다.

// 일반 함수 정의: 함수 선언문, 함수 표현식
function foo() {}
const bar = function () {};
// 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수다. 이는 메서드로 인정하지 않는다.
const baz = {
  x: function () {}
};

// 일반 함수로 정의된 함수만이 constructor이다.
new foo();   // -> foo {}
new bar();   // -> bar {}
new baz.x(); // -> x {}

// 화살표 함수 정의
const arrow = () => {};

new arrow(); // TypeError: arrow is not a constructor

// 메서드 정의: ES6의 메서드 축약 표현만을 메서드로 인정한다.
const obj = {
  x() {}
};

new obj.x(); // TypeError: obj.x is not a constructor

위 예제와 같이 함수 선언문과 함수 표현식으로 정의된 함수만이 constructor이고, ES6의 화살표 함수와 메서드 축약 표현으로 정의된 함수는 non-constructor 이다.

new.target

주의! IE에서는 지원하지 않는다. new.target을 지원하지 않을 경우 스코프 세이프 생성자 패턴을 사용할 수 있다.

일반 함수와 생성자 함수는 구분되지 않는다. new 연산자와 함께 호출하면 생성자 함수로 동작하고, new 연산자 없이 호출하면 일반 함수로 호출된다.

따라서 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 ES6에서는 new.target을 지원한다. new.target은 this와 유사하게 암묵적인 지역 변수와 같이 사용되며 메타 프로퍼티라고 부른다.

new 연산자와 함께 호출되면 함수 내부의 new.target은 함수 자신을 가리키고, new 연산자 없이 호출되면 undefined다.

그러므로 new.target을 사용하여 생성자 함수로서 호출했는지 확인할 수 있다.

function Circle(radius) {
    // 이 함수가 new 연산자와 함께 호출되지 않았다면 new.target은 undefined다.
    if (!new.target) {
        // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
        return new Circle(radius);
    }

    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
}

// new 연산자 없이 생성자 함수를 호출하여도 new.target을 통해 생성자 함수로서 호출된다.
const circle = Circle(5);
console.log(circle.getDiameter());  // 10

핵심 정리

• 함수 선언문과 함수 표현식으로 정의된 함수만이 constructor이다.
• 생성자 함수는 첫 문자를 대문자로 명명하여 일반 함수와 구별한다.
• 생성자 함수 내부에서 return문은 반드시 생략한다.
• 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 new.target을 사용하여 생성자 함수로 호출했는지 확인하는 코드를 작성할 수 있다.

---

Reference

[book] 모던자바스크립트