[JavaScript] 클래스 - 3부

3. 클래스 호이스팅

앞서 “1. 생성자 함수 vs. 클래스”에서 비교하여 설명한 것과 같이, 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다고 하였다. 이것이 무엇을 의미하는지 다음 코드를 통해 살펴보자.

아래의 경우는 클래스 선언문으로 정의한 경우이다.

// 클래스 선언문
class Person {}

console.log(typeof Person); // function

이 경우, 함수 선언문과 같이 자바스크립트 엔진의 소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수 객체를 생성한다.

💡 클래스가 평가되어 생성된 함수 객체는 생성자함수로서 호출할 수 있는 함수 즉, constructor 이다. 생성자 함수로서 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍(Pair)으로 존재하기 때문이다.

console.log(Person);
// Reference Error: Cannot access 'Person' before initialization

// 클래스 선언문
class Person {}

위와 같이 클래스는 호이스팅이 되지 않는 것처럼 보인다. 다음의 경우를 살펴보자.

const Person = '';

{
    // 호이스팅이 되지 않는다면 상위 스코프의 값인 ''이 출력되어야 한다.
    console.log(Person);
    // Reference Error: Cannot access 'Person' before initialization

    // 클래스 선언문
    class Person {}
}

위의 예제를 통해 확인할 수 있듯, 클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다. 단, 클래스는 let, const 키워드와 같이 일시적 사각지대(Temporal Dead Zone)이 존재하기 때문에 호이스팅이 발생하지 않는 것처럼 보일 뿐이다.

💡 일시적 사각지대 (Temporal Dead Zone, TDZ)란,
let과 const 키워드로 선언된 변수의 생명주기는 다음과 같다.

1. 선언 단계 ⇒ 2. 초기화 단계 ⇒ 3. 할당 단계

그 중 1단계와 2단계 사이에서 일어나는 실행 컨텍스트에는 변수가 있지만, 메모리가 아직 할당되지 않는 상태가 바로 일시적 사각지대가 된다.

💡 (Tip) var, let, const, function, function*, class 키워드를 사용하여 선언된 모든 식별자는 호이스팅된다. 모든 선언문은 런타임 이전 (소스코드 평가 과정)에서 먼저 실행되기 때문이다.

참고자료

[1] 모던 자바스크립트 딥다이브, 이웅모, 2022/08/24 - pp. 417 - 468

[2] 모던 자바스크립트 튜토리얼 - https://ko.javascript.info/class#ref-38