[Javascript]자바스크립트 생성자 함수와 new 키워드: 실수 방지 팁과 사용 예제

JavaScript에서 객체를 생성할 때 흔히 사용하는 방법 중 하나는 생성자 함수를 사용하는 것입니다. 그러나 실수로 new 키워드를 빠뜨리면 문제가 발생할 수 있습니다. 이번 포스팅에서는 이러한 문제를 방지하는 팁과 함께 생성자 함수와 화살표 함수의 차이점을 알아보겠습니다.

≣ 목차

• 생성자 함수란?🧑‍💻
• new 키워드의 역할🆕
• new.target을 사용하여 실수 방지🛡️
• 예제 코드와 설명📝
• 화살표 함수와 new 키워드🚫
  

---

01. 생성자 함수란?🧑‍

자바스크립트 생성자 함수는 객체를 생성하는 데 사용되는 특별한 함수입니다. 함수 이름은 일반적으로 대문자로 시작하며, this 키워드를 사용하여 객체의 프로퍼티를 정의합니다.
생성자 함수에 관한 자세한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 객체 완벽 가이드: 선언, 사용법, 복사

---

02. new 키워드의 역할🆕

JavaScript에서 new 키워드는 주로 생성자 함수(constructor function)와 함께 사용되어 새로운 객체를 생성하는 데 사용됩니다. new 키워드를 사용하면 다음과 같은 일들이 일어납니다:

1. 새로운 빈 객체 생성: new 키워드를 사용하면 먼저 새로운 빈 객체가 생성됩니다.
2. 프로토타입 연결: 생성된 새로운 객체는 생성자 함수의 prototype 속성을 참조하는 프로토타입 객체에 연결됩니다.
3. this 바인딩: 생성자 함수 내에서 this 키워드는 새로 생성된 객체를 가리키게 됩니다.
4. 생성자 함수 실행: 생성자 함수의 코드가 실행되며, 이때 this 키워드를 통해 새 객체의 속성과 메서드가 정의됩니다.
5. 새 객체 반환: 생성자 함수가 명시적으로 다른 객체를 반환하지 않는 한, new 키워드는 새로 생성된 객체를 반환합니다.

// 생성자 함수 정의
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    };
}

// new 키워드를 사용하여 객체 생성
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

person1.sayHello(); // Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // Hello, my name is Bob and I am 25 years old.

동작 과정

1. new Person('Alice', 30)를 호출하면 새로운 빈 객체가 생성됩니다.
2. 이 객체는 Person 함수의 프로토타입 객체에 연결됩니다.
3. Person 함수가 호출되고, this 키워드는 새로 생성된 객체를 가리키게 됩니다.
4. this.name = name과 같은 코드를 통해 새로운 객체에 name과 age 속성이 추가됩니다.
5. 생성된 객체가 반환되어 person1 변수에 할당됩니다.

이와 같은 방식으로 new 키워드를 사용하면 동일한 구조를 가지는 여러 객체를 간편하게 생성할 수 있습니다.

---

03. new.target을 사용하여 실수 방지🛡️

new.target은 함수가 new 키워드로 호출되었는지 확인하는 데 사용됩니다. new 키워드 없이 호출되면 undefined가 반환되며, 이를 통해 조건식을 적용하여 실수를 방지할 수 있습니다.

function Teacher(name, subject) {
  if (!new.target) {
    return new Teacher(name, subject);
  }

  this.name = name;
  this.subject = subject;

  this.teach = function () {
    return `${this.name}가 ${this.subject}를 가르칩니다.`;
  };
}

---

04. 예제 코드와 설명📝

아래 코드는 new 키워드를 사용한 경우와 사용하지 않은 경우에 대한 예제입니다.

const bob = new Teacher("밥", "수학");
console.log(bob); // Teacher { name: '밥', subject: '수학', teach: [Function (anonymous)] }
console.log(bob.teach()); // "밥이 수학을 가르칩니다."

const bob2 = Teacher("밥", "수학"); // 실수로 new 키워드 빠뜨림
console.log(bob2); // Teacher { name: '밥', subject: '수학', teach: [Function (anonymous)] }
console.log(bob2.teach()); // "밥이 수학을 가르칩니다."

위 예제에서 new 키워드를 사용하지 않은 경우에도 조건식 덕분에 객체가 정상적으로 생성됩니다.

---

05. 화살표 함수와 new 키워드🚫

화살표 함수는 new 키워드와 함께 사용할 수 없습니다. 이는 화살표 함수가 일반 함수와는 다르게 동작하기 때문입니다.

const TeacherArrow = (name, subject) => {
  this.name = name;
  this.subject = subject;
};
const bob3 = new TeacherArrow("밥", "수학"); // 오류 발생

화살표 함수는 this를 자체적으로 바인딩하지 않기 때문에 생성자 함수로 사용할 수 없습니다.

생성자 함수와 new 키워드를 적절히 사용하면 JavaScript에서 객체 생성 시 발생할 수 있는 실수를 방지할 수 있습니다. new.target을 활용하여 실수를 줄이고, 화살표 함수와의 차이점을 명확히 이해하는 것이 중요합니다.