🐸 [JavaScript] 생성자 함수

앞서 객체를 리터럴로 생성하는 방법을 살펴본 바 있다.

굉장히 간편하고 직관적인 방법이지만, 단점이 존재한다.

동일 property를 갖는 객체를 여러개 생성해야 하는 경우도 많다.

이럴 때에 리터럴로 객체를 생성하는 것은 굉장히 비효율적인 방법이다.

그래서 우리는 Object 생성자 함수라는 것을 사용한다.
(이외에도 다른 built-in 생성자 함수들이 몇 개 있다.)

---

instance

new 연산자와 함께 Object 생성자 함수를 호출하면,
빈 객체를 생성해 반환한다.

이때 생성자 함수에 의해 생성되는 객체를 instance 라고 한다.

이 생성자 함수는 그냥 함수와 뭐가 다른걸까?

일반 함수와 생성자 함수의 정의 부분은 별 다른 차이가 없다.

그러나 new 연산자로 호출했을 때에 생성자 함수로 동작한다는 점에서 차이가 있다.

생성자 함수로 동작한다는 것은, instance를 생성하고,
생성된 instance를 초기화해주는 것 -초기화는 옵션 사항이다- 을 말한다.

그럼 생성자 함수는 어떻게 instance 생성하는 걸까?

JavaScript 엔진은, 암묵적인 처리를 통해 instance를 생성하고 반환한다.

그러니까 암묵적으로 빈 객체가 생성되며, 이 빈 객체가 바로 생성자 함수가 생성한 instance이다.

이 instance는 this에 바인딩 된다.

바인딩이란 식별자와 값을 연결하는 과정을 말한다.

instance가 this에 바인딩된다는 건, this 와 this가 가리킬 객체 를 바인딩하는 것을 말한다.

그 다음은 개발자의 영역이다.

개발자는 this에 바인딩되어 있는 instance를 초기화한다.

즉 instance에 property나 method를 추가하고,
생성자 함수가 인수로 전달받은 초기값을 instance property에 할당하여 초기화하거나 고정값을 할당한다.

모든 처리가 끝나면, 완성된 instance가 바인딩된 this를 암묵적으로 반환 한다.

이때 만약 this가 아닌 다른 객체를 명시적으로 반환하면?

this가 반환되지 못하고, return 문에 명시한 객체가 반환된다.

이 경우, 생성자 함수의 기본 동작을 훼손하기 때문에, return문은 반드시 생략하도록 하자.

---

함수와 객체

함수 또한 객체이기 때문에, 일반 객체가 가지고 있는 internal slot과 internal method를 모두 가지고 있다.
그러나 일반 객체는 호출이 불가능하지만, 함수는 호출이 가능하다.

그러니까 함수 객체는 internal slot, internal method를 포함해서,
함수 객체 만을 위한 [[Environment]] [[FormalParamenters]] 등의 internal slot과
[[Call]] [[Construct]] 와 같은 internal method또한 추가로 가지고 있다.

(일반 함수로 호출되면 [[Call]]이, new 연산자와 함께 생성자 함수로 호출되면 [[Construct]]가 호출된다.)
[[Call]]를 갖는 함수 객체를 callable이라고 하고, [[Construct]]를 가지면 constructor, 가지지 않으면 non-constructor라고 부른다.

함수 객체는 constructor일 수도 있고 non-constructor일 수도 있다.

이를 어떻게 구별한까?

constructor vs. non-constructor

JavaScript 엔진은, 함수를 정의 평가하여 함수 객체를 생성할 때,
함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분한다.

• constructor: 함수 선언문, 함수 표현식, 클래스
• non-constructor: 메서드, 화살표함수

근데 이 메서드라는 게, 일반적인 메서드보다 좁은 의미를 가진다.

일반적으로는 함수를 property 값으로 사용하면 메서드라고 부른다.
그런데 non-constructor의 메서드는 메서드 축약 표현만을 칭하는 말이다.

그러니까 위의 분류에 따르면, 함수 선언문과 함수 표현식으로 정의된 함수만이 constructor이고, 메서드 축약 표현으로 정의 된 함수는 non-constructor라는 것이다.

---

new

마지막으로 new 연산자에 대해 정리하자.

일반 함수와 생성자 함수간의 형식적인 차이는 없다고 했다.

new 연산자와 함께 함수를 호출하면, 해당 함수는 생성자 함수로 동작한다.

new 연산자 없이 생성자 함수를 호출하면 일반 함수로 호출된다.

생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해, Pascal case convention을 사용한다.

그러나 이 방법 만으로는 언제든 실수가 발생한다.

때문에 위험성을 피하기 위해, ES6에서는 new.target 지원을 도입했다.

this와 유사하게, constructor는 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용된다.
(메타 프로퍼티라고 불린다.)

함수 내부에서 new.target을 사용하면, new 연산자와 함께 생성자 함수로서 호출되었는지 확인이 가능하다.

new 연산자와 함께 생성자 함수로서 호출되면, 함수 내부의 new.target은 함수 자신을 가리킨다.

new 연산자 없이 일반 함수로서 호출된 함수 내부의 new target은 undefined이다.

=> 함수 내부에서 new.target을 사용해서
new 연산자와 생성자 함수로서 호출했는지 확인한다.
만약 그렇지 않은 경우 new 연산자와 함께 재귀호출을 통해 생성자 함수로서 호출할 수 있다.

---