new 연산자와 생성자 함수

'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다.
재사용할 수 있는 객체 생성 코드를 구현하는 것이죠.

예시: 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우 등.

모던 자바스크립트 참고

생성자 함수(constructor function)

🔧 생성자 함수와 일반 함수에 기술적인 차이는 없습니다.

생성자 함수의 규칙

1. 일반 함수와 구분하기 위해, 함수 이름의 첫 글자를 대문자로 작성합니다.
2. 반드시 'new' 연산자를 붙여 실행합니다.

<script>
function User(name) { // 함수 이름의 첫 글자는 대문자
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라"); // new 연산자 붙여 실행

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

new User(...)를 써서 함수를 실행하면 아래의 알고리즘이 동작합니다.
1. 빈 객체를 만들어 this에 할당합니다.
2. 함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정합니다.
3. this를 반환합니다.

<script>
function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}
</script>

let user = new User("보라")는 아래 코드를 입력한 것과 동일하게 동작합니다.

<script>
let user = {
  name: "보라",
  isAdmin: false
};
</script>

⚠️ 모든 함수는 생성자 함수가 될 수 있습니다.
new를 붙여 실행한다면 어떤 함수라도 위에 언급된 알고리즘이 실행됩니다.
이름의 '첫 글자가 대문자’인 함수는 "반드시" new를 붙여 실행해야 합니다.

익명 생성자 함수를 사용하면 재사용 불가능한 함수를 만들 수 있습니다.

<script>
let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

</script>

---

생성자 함수에는 return문을 사용하지 않습니다.

만약 return 문이 있다면

• 객체를 return 한다면 this 대신 객체가 반환됩니다.

<script>
function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name );  // 고릴라
</script>

• 원시형을 return 한다면 return문이 무시됩니다.

<script>
function SmallUser() {

  this.name = "원숭이";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // 원숭이
</script>

---

생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있습니다.

메서드를 더해주는 것도 가능합니다.
아래 예시에서 new User(name)는 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어줍니다.

<script>
function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let doojji = new User("조두찌"); // *

doojji.sayHi(); // 제 이름은 조두찌입니다.  

/*
let doojji = new User("조두찌"); 의 의미는... // * 

doojii = {
   name: "조두찌",
   sayHi: function() { ... }
}
*/
</script>