JavaScript - new 연산자와 생성자 함수

=> 유사한 객체를 여러개 만들어야 할 때, new 연산자와 생성자 함수를 사용

 

- 생성자 함수

• 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다.
• 다만, 생성자 함수는 아래 두 관례를 따른다.
  • 함수 이름의 첫 글자는 대문자로 시작
  • 반드시 new 연산자를 붙여 실행

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

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

alert(user.name); // 보라
alert(user.isAdmin); // false

• new User(...)를 사용하여 함수를 실행하면 아래와 같은 알고리즘이 동작
  • 빈 객체를 만들어 this에 할당
  • 함수 본문을 실행. this에 새로운 프로퍼티를 추가해 this를 수정
  • this를 반환

  function User(name) {
    // this = {};  (빈 객체가 암시적으로 만들어짐)
  
    // 새로운 프로퍼티를 this에 추가함
    this.name = name;
    this.isAdmin = false;
  
    // return this;  (this가 암시적으로 반환됨)
  }
  
  // 아래 코드를 입력한 것과 동일하게 동작
  let user = new User("보라");
  
  let user = {
    name: "보라",
    isAdmin: false
  };
  

 

- 생성자와 return문

• 생성자 함수에는 보통 return 문이 없다.
• 반환해야 할 것들은 모두 this에 저장되고 this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.
• return 문이 있다면 ?
  • 객체를 return 한다면 this 대신 객체가 반환

  function BigUser() {
    this.name = "원숭이";
  
    return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
  }
  
  alert( new BigUser().name );  // 고릴라

  • 원시형을 return 한다면 return문 무시

  function SmallUser() {
    this.name = "원숭이";
  
    return; // <-- this를 반환함
  }
  
  alert( new SmallUser().name );  // 원숭이

 

 

- 요약

• 생성자 함수는 일반 함수이다. 다만, 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 쓴다.
• 생성자 함수는 반드시 new 연산자와 함께 호출해야 한다. new 와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환된다.
• 생성자 함수는 유사한 객체를 여러개 만들 때 유용하다.

---

[ 참고자료 ]

https://ko.javascript.info/constructor-new

new 연산자와 생성자 함수