생성자 함수와 new.target을 이해해보자!

Javascript

생성자 함수와 new.target을 이해해보자!_!

JANNNNNN 2024. 10. 23. 13:44

이번에는 생성자 함수를 사용해 객체를 만드는 방법에 대해 알아보겠습니다! 자바스크립트에서 객체를 만들 때 가장 많이 사용되는 방법 중 하나가 바로 생성자 함수인데요. 이번 글에서는 생성자 함수의 기본 개념과 new.target이란 무엇인지, 그리고 생성자 함수를 사용할 때 주의해야할 점에 대해 살펴보도록 하겠습니다 🙌 :)

🎯 1. 생성자 함수란?

생성자 함수는 여러 객체를 비슷한 구조로 만들 때 사용되는 함수입니다. 일반 함수와 구분하기 위해 함수 이름의 첫 글자를 대문자로 쓰는 것이 관례입니다. 생성자 함수는 new 키워드를 사용해 호출하며, 이때 함수 내부에서 this가 새로 생성되는 객체를 가리킵니다.

📝 예제 코드: 생성자 함수 사용하기

아래 코드에서는 Dog라는 생성자 함수를 정의하고 new 키워드로 새로운 객체를 생성했습니다. 생성자 함수 내부에서 this는 새로 만들어진 객체를 가리킵니다. 따라서, 이 함수로 만든 모든 객체는 type, size 속성과 color 메서드를 가지게 됩니다.

function Dog(type, size) {
  this.type = type;
  this.size = size;
  this.color = function () {
    return `${this.type}은 흰색입니다.`;
  };
}

const pome = new Dog('포메라니안', 'small');
console.log(pome); // Dog { type: '포메라니안', size: 'small', color: [Function (anonymous)] }
console.log(pome.color()); // "포메라니안은 흰색입니다."

🎯 2. new.target의 역할

new.target은 함수 또는 생성자 함수가 new 키워드로 호출되었는지 확인할 때 사용하는 내장된 속성입니다. 생성자 함수 내부에서 new.target은 호출된 함수 자체를 가리킵니다. 만약 new 없이 호출되었다면, new.target은 undefined가 됩니다. 이 속성을 활용하면, new 없이 호출되는 것을 방지할 수 있습니다.

📝 예제 코드: new.target 사용하기

아래 코드에서는 new.target을 이용해 함수가 new 키워드로 호출되었는지 확인합니다. 만약 new 없이 호출되었다면, new Dog2(type, size)를 호출하여 생성자 함수가 올바르게 실행되도록 합니다. 이렇게 하면 실수로 new 키워드를 빠뜨리는 것을 방지할 수 있습니다.

function Dog2(type, size) {
  if (!new.target) { // new 키워드로 호출했는지 확인
    return new Dog2(type, size);
  }
  this.type = type;
  this.size = size;
  this.color = function () {
    return `${this.type}은 흰색입니다.`;
  };
}

🎯 3. 생성자 함수와 화살표 함수

생성자 함수는 new 키워드와 함께 사용되며, 내부에서 this를 통해 생성된 객체를 참조합니다. 하지만 화살표 함수는 생성자 함수로 사용할 수 없습니다. 그 이유는요 ...

this 바인딩이 고정됨: 화살표 함수는 자신만의 this를 가지지 않고, 함수가 정의된 위치의 this를 상속받습니다. 이는 화살표 함수가 호출될 때 new 키워드에 의해 생성되는 새로운 객체를 가리키지 못하게 만듭니다.
new.target 속성 없음: 화살표 함수에는 new.target 속성이 존재하지 않기 때문에, 화살표 함수는 생성자 함수로 사용할 수 없습니다.

📝 예제 코드: 화살표 함수에서 생성자 함수 사용 불가

아래 코드에서 화살표 함수 Dog3를 new 키워드로 호출하면 에러가 발생합니다. 화살표 함수는 this를 자신의 문맥에 묶어버리기 때문에 생성된 객체를 참조할 수 없고, 생성자 함수로 사용할 수 없습니다.

const Dog3 = (type, size) => {
  this.type = type; // 화살표 함수의 this는 고정되어 있어 생성된 객체를 참조할 수 없음
  this.size = size;
};

// const maltese = new Dog3('말티즈', 'small'); // 에러 발생

⭐ 중요: 생성자 함수 사용 시 알아야 할 점

생성자 함수는 new 키워드와 함께 호출해야 합니다. 그렇지 않으면 this가 전역 객체를 가리키게 되어 의도하지 않은 동작이 발생할 수 있습니다.
new.target을 활용해 안전한 생성자 함수 호출을 구현할 수 있습니다. 이 속성을 통해 함수가 new 키워드로 호출되었는지 확인하고, 그렇지 않을 경우 새로운 인스턴스를 생성하도록 만들 수 있습니다.
화살표 함수는 생성자 함수로 사용할 수 없습니다. 화살표 함수는 자신만의 this를 가지지 않기 때문에, 객체를 생성하는 용도로는 적합하지 않습니다.

🛠 실무적인 팁

생성자 함수로 객체를 생성할 때, new.target을 이용해 new 키워드 없이 호출되는 상황을 방지하는 것이 좋습니다. 또한, 화살표 함수는 일반 함수와 성격이 다르므로 객체를 생성할 때는 사용하지 않도록 주의하세요. 😊

📌 결론

생성자 함수는 객체를 만들 때 유용하게 사용되며, new.target을 이용하면 new 키워드를 강제할 수 있습니다. 화살표 함수는 this를 가질 수 없고, new.target 속성도 없기 때문에 생성자 함수로 사용할 수 없습니다. 이러한 특성을 이해하고 올바른 문법을 사용하는 것이 중요합니다!