JavaScript

new 연산자와 생성자 함수

 - 객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다.

 - 하지만 개발을 하다 보면 유사한 객체를 여러개 만들어야 할 경우가 생깁니다.

 - 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하고 싶을 때가 그런 경우가 된다.

 

생성자 함수

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

 - 하지만 생성자 함수의 경우 아래 두 관례를 따르게 됩니다.

함수 이름의 첫 글자는 대문자로 시작합니다.
반드시 'new' 연산자를 붙여 실행합니다.

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

const user1 = new User("kim", 28);
console.log(user1);
console.log(user1.isAdmin); // false

※ new User( ... ) 를 사용하여 함수를 실행하면 다음 아래와 같은 알고리즘이 동작하게 된다.

 

1. 빈 객체를 만들어 this에 할당합니다.

2. 함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정합니다.

3. this를 반환합니다.

 

// new User(...) 가 일어났을 때!!

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

※ 이제 let user = new User("kim", 28)은 아래 코드를 입력한 것과 동일하게 동작함.

let user = {
	name : "kim",
    age : 28,
    isAdmin : false
}

 - new User("kim") 이외에도 new User("lee") new User("park")등을 이용하면 손쉽게 사용자 객체를 만들수 있게 됩니다.

 - 객체 리터럴 문법보다 훨씬 간단하고 쉽게 객체를 만들 수 있게 되었다.

 

 - 생성자의 의의 : 재사용 할 수 있는 객체 생성 코드를 구현한 것이다.

 

 - 주의 : 모든 함수는 생성자 함수가 될 수 있다. new를 붙여 실행한다면 어떤 함수라도 위의 알고리즘이 실행될 것이다.

            이름이 첫 글자가 대문자인 함수는 new를 붙여 실행해야 한다는 점도 잊지 말자!!

 

생성자와 return 문

 - 생성자 함수엔 보통 return 문이 없다. 반환해야 할 경우 모두 this에 저장되고 this는 자동으로 반환되기 때문에 

   반환문을 명시적으로 써 줄 필요가 없다.

 

 - 하지만 return 문이 있다면 어떻게 될까?

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

 - return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고 이 외의 경우에는 this가 반환된다.

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

console.log(new BigUser()); // 고릴라가 나온다!
// 첫 번째 규칙이 적용된 case

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

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

// 두 번째 규칙이 적용된 case

※ return 문이 있는 생성자 함수는 거의 없다!!

 

let user = new User;
// 위 아래는 똑같이 작동하는 코드!!
let user2 =- new User();

// 명세서엔 괄호를 생략해도 된다고 했지만 좋은 스타일은 아니라고 한다!

생성자 내 메서드

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

   => 엄청난 유연성 확보

 - 지금까진 this에 프로퍼티를 더해주는 예시만 살펴보았는데 메서드를 더해주는 것도 가능하다.

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

  this.sayHi = function () {
    console.log(this.name);
  };
}

let bora = new User("보라");
bora.sayHi();

요약

생성자 함수는 일반 함수이다. 하지만 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자를 사용한다.

생성자 함수는 반드시 new와 함께 호출해야 한다. new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고
마지막에는 this가 반환된다!

생성자 함수는 유사한 객체를 여러개 만드는 데 유용하다.

---

 

new 연산자와 생성자 함수