Growth from the root - Vanilla JavaScript - new 연산자와 생성자 함수

new 연산자와 생성자 함수

📃 객체 리터럴 {...}을 사용하면 객체를 쉽게 생성가능함, new 연산자를 사용하면 유사한 객체를 쉽게 만들 수 있음.

생성자 함수

📃 일반적인 함수와 같으나, 관례를 따름

1. 함수 이름의 첫 글자는 대문자로 시작
2. 반드시 'new' 연산자를 붙인다

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

let user = new User("형준")

console.log(user.name) //  형준
console.log(user.isAdmin) // false

✏️ new User(...) 의 알고리즘을 살펴보자.

1. 빈 객체를 만들어 this에 할당함
2. 함수 본문 실행, this에 새로운 프로퍼티 추가해서 this를 수정
3. this 반환

function User(name) {
  // this = {} (빈 객체가 암시적으로 만들어짐)
  
  // 새로운 프로퍼티를 this에 추가함
  this.name = name ;
  this.isAdmin = false ;
  
  // return this; (this가 암시적으로 반환)
}


let user = {
  name : "형준",
  isAdmin : false
}

✏️ new User("형준") 이외에도 쉽게 객체를 만들 수 있음,
생성자함수의 의의는 재사용 할 수 있는 객체 생성 코드를 구현하는 것이다.

new.target과 생성자 함수

📃 new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지 알 수 있음

• 일반적인 방법으로 함수호출 : new.target은 undifined를 반환
• new와 함께 호출하면 new.target는 함수자체를 반환

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

// 'new' 없이 호출함
User(); // undefined

// 'new'를 붙여 호출함
new User(); // function User { ... }
}

생성자와 return문

📃 생성자 함수엔 보통 return문이 없음, 반환해야 할 것들은 모두 this에 저장되고,this는 자동으로 반환되기 때문에 반환문을 명시적으로 써야함.
✅ 만약, return문이 있다면 ?

• 객체를 return 한다면 this 대신 객체가 반환.
• 원시형을 return 한다면 return문 무시.

function BigUser() {

  this.name = "원숭이";

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

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

✏️ 첫 번째 규칙이 적용돼 return은 this를 무시하고 객체를 반환

function SmallUser() {

  this.name = "원숭이";

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

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

✏️아무것도 return하지 않는 예시를 살펴보자, 원시형을 반환하는 경우와 마찬가지로 두 번째 규칙이 적용됨

생성자내 메서드

📃 생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성 가능함.

function User(name) {
  this.name = name;

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

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/