[모던 자바스크립트 Deep Dive] 17장 : 생성자 함수에 의한 객체 생성 - JS

생성자 함수

객체 리터럴에 의한 생성 방식은 직관적이고 간편하다. 하지만 단 하나만의 객체만을 생성해 여러 개를 생성해야 할 경우에는 비효율적이다. 그렇지만 생성자 함수에 의한 객체 생성 방식은 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

---

🔍 객체 리터럴에 의한 객체 생성

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

VS

🔍 생성자 함수에 의한 객체 생성

// 생성자 함수
function Circle(radius) {
  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

 

😄 어떤 것이 더 간편해 보이나요?

객체 리터럴에 의한 객체 생성은 직관적이고 간편하다. 하지만 단 하나의 객체만을 생성한다!

생성자 함수에 의한 객체 생성은 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

 

---

 

✍ 생성자 함수에 대해 알아보자

생성자 함수의 역할은 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿(클래스)으로서 동작하여 인스턴스를 생성하는 것과 생성된 인스턴스를 초기화하는 것이다.

 

❗ 주의

생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손한다. 따라서 생성자 함수 내부에서 return 문을 반드시 생략해야 한다.

 

 

➕ 생성자 함수와 일반 함수의 구분

생성자 함수와 일반 함수에 특별한 형식적 차이는 없다. new 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작한다. 그렇다는 말은 만약 new 연산자와 함께 호출하지 않으면 생성자 함수가 아닌 일반 함수로 동작한다는 뜻이다.

 

생성자 함수 = 함수 선언문과 함수 표현식으로 정의된 함수

일반 함수 = ES6의 화살표 함수와 메서드 축약 표현으로 정의된 함수

 

 

❓ 만약 생성자 함수가 new 연산자 없이 호출되면 어떻게 하나요?

실수는 언제나 발생할 수 있다. 이러한 위험성을 회피하기 위해 ES6에선 new.target을 지원한다.

 

💨 new.target

 

    생성자 함수 : 함수 내부의 new.target은 함수 자신을 가리킨다.

    일반 함수 : 함수 내부의 new.target은 undefined다.

 

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

// 일반 함수로서 호출되더라도 new.target을 통해 생성자 함수로서 호출
const circle = Circle(5);
console.log(circle.getDiameter()); // 10

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!