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

new 연산자와 생성자 함수를 사용하면 유사한 객체를 쉽게 생성할 수 있다. 이를 통해 개발자는 코드의 재사용성과 가독성을 높일 수 있다.

---

1. 생성자 함수란?

생성자 함수의 특징

• 첫 글자 대문자: 생성자 함수 이름은 관례적으로 첫 글자를 대문자로 작성한다.
• new 연산자 사용: 반드시 new 연산자를 붙여 실행해야 한다.

생성자 함수의 동작 원리

new를 붙여 생성자 함수를 호출하면 다음과 같은 동작이 수행된다:
1. 빈 객체가 생성되고, this에 할당된다.
2. 함수 본문이 실행되며, this에 프로퍼티와 메서드가 추가된다.
3. this가 반환된다.

예제

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

console.log(user.name); // "보라"
console.log(user.isAdmin); // false

위 예제는 다음과 동일한 객체를 생성한다:

let user = {
  name: "보라",
  isAdmin: false
};

---

2. 재사용 불가능한 익명 생성자 함수

재사용할 필요가 없는 복잡한 객체는 익명 생성자 함수를 사용해 캡슐화할 수 있다.

let user = new function() {
  this.name = "John";
  this.isAdmin = false;
  // 복잡한 로직 추가 가능
};

• 이 방식은 객체를 단 한 번만 생성하며, 재사용은 불가능하다.

---

3. new.target과 생성자 함수

new.target을 사용하면 함수가 new와 함께 호출되었는지 확인할 수 있다.

function User() {
  console.log(new.target);
}

User(); // undefined
new User(); // function User { ... }

일반 호출을 강제로 new로 변환

function User(name) {
  if (!new.target) {
    return new User(name);
  }
  this.name = name;
}

let user = User("보라");
console.log(user.name); // "보라"

---

4. 생성자와 return문

• 생성자 함수에 return문이 없으면 자동으로 this가 반환된다.
• return에 따라 반환 결과가 달라질 수 있다:
  1. 객체 반환: 명시적으로 반환된 객체가 반환된다.
  2. 원시값 반환: 무시되고, this가 반환된다.

예제

function BigUser() {
  this.name = "원숭이";
  return { name: "고릴라" };
}

console.log(new BigUser().name); // "고릴라"

function SmallUser() {
  this.name = "원숭이";
  return;
}

console.log(new SmallUser().name); // "원숭이"

---

5. 괄호 생략

인수가 없는 생성자 함수 호출 시 괄호를 생략할 수 있다:

let user = new User; // new User()와 동일

• 하지만 가독성을 위해 괄호를 사용하는 것이 권장된다.

---

6. 생성자 내 메서드

생성자 함수를 사용하면 매개변수로 객체의 프로퍼티와 메서드를 동적으로 정의할 수 있다.

function User(name) {
  this.name = name;
  this.sayHi = function() {
    console.log(`제 이름은 ${this.name}입니다.`);
  };
}

let user = new User("보라");
user.sayHi(); // "제 이름은 보라입니다."

---

요약

• 생성자 함수는 객체를 생성하기 위한 일반 함수이며, 관례적으로 이름의 첫 글자는 대문자로 시작한다.
• new 연산자를 사용하면 내부적으로 this가 생성되어 반환된다.
• 생성자 함수는 유사한 객체를 반복적으로 생성해야 할 때 유용하다.
• 생성자 함수 내에서 프로퍼티와 메서드를 정의할 수 있다.
• 인수가 없는 생성자 함수 호출 시 괄호를 생략할 수 있으나, 가독성을 위해 괄호를 사용하는 것이 좋다.

---

과제

1. 함수 두 개로 동일한 객체 만들기

다음 조건을 만족하는 함수 A와 B를 작성하라:

function A() { ... }
function B() { ... }

let a = new A;
let b = new B;

console.log(a == b); // true

---

let obj = {};

function A() { return obj; }
function B() { return obj; }

alert( new A() == new B() ); // true