[자바스크립트 스터디] 생성자 함수

프로그래머스에서 진행하는 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS 에 참여하게 되었습니다. 자바스크립트 기본기를 탄탄하게 다져보도록 하겠습니다 🔥🔥🔥

생성자 함수

생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다

샘플 코드

function Food(name) {
  this.name = name;
}

const pizza = Food('pizza');

console.log(pizza.name);

위의 코드는 아래와 같은 에러가 발생합니다

에러 발생

VM381:1 Uncaught TypeError: Cannot read properties of undefined (reading 'name')

이유

생성자 함수를 new 연산자와 함께 호출하지 않으면 생성자 함수가 아닌 일반 함수로서 호출됩니다. 일반 함수로 호출된 함수 내에는 반환문이 없으므로 암묵적으로 undefined를 반환합니다. 위의 코드에서 pizza 변수에는 undefined가 할당됩니다. undefined에는 name이라는 속성이 존재하지 않으므로 undefined에서 name 이라는 속성을 읽을 수 없다는 에러가 발생하는 것입니다.

추가적으로 일반함수로 호출되었을때 this에 전역 객체 window가 바인딩됩니다.
이러한 이유로 위의 코드에서 name는 전역객체의 프로퍼티로 등록됩니다

window.name // 'pizza'
name // 'pizza'

해결방법

new 연산자와 함께 Food 생성자 함수를 호출하면 문제가 해결됩니다

const pizza = new Food('pizza');
console.log(pizza.name); // 'pizza'

new 연산자

자바스크립트 딥다이브 도서의 17.2.3 부분을 참고하여 new 연산자와 함께 생성자 함수를 호출하면 발생하는 일을 정리해보았습니다

1. 암묵적으로 인스턴스 객체를 생성된다
2. 생성된 인스턴스 객체는 this에 바인딩된다
3. this에 바인딩 되어 있는 인스턴스에 프로퍼티나 메서드를 추가한다
4. 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당한다
5. 인스턴스가 바인딩된 this가 암묵적으로 반환된다
   • 명시적으로 객체를 반환하면 암묵적인 this 반환이 무시된다
   • 명시적으로 원시값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다
   • 생성자 함수 내부에 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하는 것이므로 생정사 함수의 내부에서는 return 문을 반드시 생략해야 한다