[JS] 생성자 함수와 new 연산자

new 연산자를 알기 위해서는 생성자 함수를 먼저 알아야 한다.

생성자 함수는 일반적인 함수와 기술적인 차이가 없다. 일반적인 함수는 재사용할 수 있는 코드들을 묶어 사용하기도 하고, 객체를 생성할 수도 있다.

다만, 객체를 생성하는데 있어, 일반적인 함수는 return을 사용하여 객체를 생성하고 생성자 함수는 new 연산자를 사용함으로써 객체를 생성한다.

이러한 new 연산자를 사용할 때는 다음과 같은 규칙을 지켜줘야한다.

1. 함수 이름의 첫글자는 대문자로 시작(다른 함수와 구별을 목적)
2. 반드시 'new' 연산자를 붙여서 사용

---

하지만 일반적인 함수를 통해 객체를 생성할 수도 있는데 왜 new연산자를 통해 생성자 함수를 만들까? 그 이유는 다양하다.

객체의 속성과 메서드 초기화
생성자 함수를 사용하면 객체를 생성할 때 this를 사용하여 초기 속성과 메서드를 설정할 수 있다.

function User(name) {
  this.name = name;
  this.introduce = function () {
    console.log(`나는 ${this.name}라고해. 반가워!`);
}
const userName = new User('인재');

프로토타입 상속
생성자 함수를 사용하면 생성된 객체들이 프로토타입 체인을 통해 공유하는 메서드와 속성을 갖는다. 이를 통해 메모리를 절약하고 코드 재사용성을 높일 수 있다.

인스턴스 확인
instanceof 연산자를 사용하여 객체가 특정 생성자 함수의 인스턴스인지 확인할 수 있다. 이를 통해 객체의 타입 체크와 다형성을 구현이 가능하다.

function User(name) {
  this.name = name;
  this.introduce = function () {
    console.log(`나는 ${this.name}라고해. 반가워!`);
}
const userName = new User('인재');
console.log(userName instanceof User); // true

관례
JavaScript 커뮤니티에서는 생성자 함수를 통한 객체 생성이 일반적인 패턴으로 사용되고 있다. 따라서, 다른 개발자와의 협업이나 코드 가독성 측면에서 일관성을 유지하는 것이 중요하다.

---

🙋‍♂️Tip

오류발생❗️❗️❗️

생성자 함수에 new 연산자를 붙이지 않는다면 일반적인 함수와 동일하게 작동되어 객체를 반환하지 않는다.

클래스 컴포넌트를 사용한다면 자동으로 오류를 만들어주지만, 다른 컴포넌트의 경우에는 오류를 만들어주지 않기 때문에, 이에 대한 방어코드를 작성하곤한다.

하지만 방어코드를 작성하는 것 외에 다른 방법이 있다.

바로 new.target를 이용하는 것이다. new.target은 함수가 new와 함께 호출되었는지 알 수 있다.

이를 통해 아래와 같이 생성자 함수에서 new연산자 유무를 확인하고 없는 경우에는, new를 붙여 반환하면 new를 붙이지 않은 경우에도 정상적으로 작동할 수 있다.

function User(name) {
  if (!new.target) return new User(name); // new를 붙이지 않은 경우 붙여준다.
  this.name = name;
  this.introduce = function () {
    console.log(`나는 ${this.name}라고해. 반가워!`);
}
const userName = User('인재');
console.log(userName.name) // 인재

다만, 위와같은 조건문만 믿고 계속 사용하지 않는다면, 일반적인 함수와 생성자 함수의 구별이 어려워질 것이다. 때문에 이러한 방식만 믿고 new를 붙이지 않는 것이 습관이 되지 않도록 해야할 것이다. 이 코드는 말 그대로 임시 방비책이여야 할 것이다❗️