Class는 var 변수처럼 호이스팅이 일어날까?

hoisting이란?

자바스크립트에서 호이스팅(Hoisting)이란 변수와 함수의 선언문을 해당 스코프의 꼭대기로 끌어올리는 동작을 의미한다. 이 과정에서 선언문 자체는 옮겨지지만, 함수 표현식의 대입문을 포함한 모든 대입문은 끌어올려지지 않는다.

var 변수의 호이스팅

console.log(a); // 'undefined' 출력
var a = 3;

자바스크립트는 초기값 할당에 대한 부분은 제외하고 오직 선언부만 호이스팅한다. 즉, 컴파일 시간 동안 자바스크립트는 함수와 변수의 값을 제외한 선언부를 메모리에 저장한다.

undefined를 출력하는 이유는?

자바스크립트 엔진이 var변수 선언부를 컴파일 단계에서 찾았을 때, 그 변수는 Lexical Environment에 추가될 것이고 undefined로 초기화된다. 그리고 실행시간 동안, 코드에서 실제로 할당이 이루어진 지점에 도달하게 되면 해당 값으로 다시 할당됩니다.

Class의 호이스팅

클래스는 var 키워드로 선언한 변수처럼 호이스팅되지 않고 let, const 키워드로 선언한 변수처럼 호이스팅된다. 따라서 클래스 선언문 이전에 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다.

const Foo = '';

{
  // 호이스팅이 발생하지 않는다면 ''가 출력되어야 한다.
  console.log(Foo);
  // ReferenceError: Cannot access 'Foo' before initialization
  class Foo {}
}

클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다. 호이스팅은 var, let, const, function, function*, class 키워드를 사용한 모든 선언문에 적용된다. 다시 말해, 선언문을 통해 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다. 모든 선언문은 런타임 이전에 먼저 실행되기 때문이다.

일반적이지는 않지만, 표현식으로도 클래스를 정의할 수 있다. 함수와 마찬가지로 클래스는 이름을 가질 수도 갖지 않을 수도 있다. 이때 클래스가 할당된 변수를 사용해 클래스를 생성하지 않고 기명 클래스의 클래스 이름을 사용해 클래스를 생성하면 에러가 발생한다. 이는 함수와 마찬가지로 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가능하기 때문이다.

// 클래스명 MyClass는 함수 표현식과 동일하게 클래스 몸체 내부에서만 유효한 식별자이다.
const Foo = class MyClass {};

const foo = new Foo();
console.log(foo);  // MyClass {}

new MyClass(); // ReferenceError: MyClass is not defined