'new'연산자와 생성자 함수

본 내용은 '모던 자바스크립트'의 내용을 공부한 후 정리한 글임을 밝힙니다.
https://ko.javascript.info/constructor-new

---

자바스크립트에서 객체를 생성하는 방법은 크게
1. 리터럴을 사용하는 방법
2. 생성자 함수를 사용하는 방법
이 있다.

두가지 방식은 기술적인 차이가 있는건 아니지만, 결론적으로 어떤 객체를 '재사용'하는데 차이가 있음을 기억하자.

new 연산자를 사용하여 객체를 생성했을 때

function Car(name){
  this.name = name;
  this.good = true;
}

let car = new Car('audi'); // 함수를 new 연산자를 사용해 변수에 할당했다.

---

객체 리터럴을 사용하여 객체를 생성했을 때

const mask = {
	name:'황사방역마스크'
  	good:false
}

차이가 있어 보이는가?

다시한번 체크하지만 동작에는 차이가 없다.

하지만 위 두가지 소스에서 차이를 발견해본다면,

• new 연산자를 사용해 객체를 생성한 방식은 다른 변수에 또 사용할 수가 있다.
• 리터럴로 생성한 객체는 거기서 끝이다.

이런 차이가 있다.

기억해야 될 것은 객체를 재사용 하기 위해서는 함수를 new 연산자를 이용해 변수에 할당하면 된다는 것이다.

new 연산자를 이용해 함수를 실행하면, 함수를 실행할 시에 다음과 같은 순서를 따른다고 한다.

1. 실행 첫 문장에 빈 객체(`{}`)를 만들고 this에 저장한다.
2. 함수 내부의 프로퍼티들을 this에 추가한다.
	- 이때 this는 객체이므로 this의 프로퍼티 또는 메서드로 저장된다.
3. 나머지를 실행한다.
4. this를 반환한다.

그리고 하나 더 알아둬야 할 것은, new를 이용해 함수를 선언할 경우, 그 함수의 return 문의 동작방식은 일반 함수 선언과 다르게 동작한다.

- return 대상이 객체이면 this가 아닌 객체 자체를 반환시킨다.
- return 대상이 원시형이면 this가 반환된다.

결론적으로, new로 선언한 함수의 return문에 객체를 넣으면 객체가 그대로 반환되고, 그 외의 경우에는 this가 반환된다는 것이다.

지금까지 계속 new로 선언한 함수에 대해서 얘기했는데, 앞으로 이 new로 선언한 함수는 생성자 라고 부르면 된다.

왜 생성자라고 부르냐면 영어로 Constructor이기 때문이다.!

객체를 생성한다 그래서 생성자 함수로 부른다고 생각하면 좀 편하다.