Hoisting ( 호이스팅 )

호이스팅은 크게 함수 호이스팅과 변수 호이스팅으로 나뉜다. 그리고 해당 개념에 관한 규칙을 요약하면 다음과 같은 항목으로 이루어진다.

• 선언된 함수는 상단에서 참조, 호출이 가능하다.
• 선언된 var 는 상단에서 참조, 할당이 가능하다.
• 선언된 let , const 는 상단에서 참조, 할당이 불가능하다.

우선 JS는 코드를 실행하기 전에 따로 컴파일 과정을 거친다는 사실을 인지할 필요가 있다. 컴파일이라는 건 사람이 이해하는(고수준) 언어로 이루어진 코드를 컴퓨터가 이해할 수 있도록(저수준) 쪼개고, 체계적인 구조로 재가공하여 전체를 분석하는 일련의 과정이다.

이 과정에서 JS 엔진은 모든 스코프(or 실행 컨텍스트)를 탐색하며 각 스코프의 변수 객체에 여러 식별자를 수집한다. 즉 실행 시점으로 넘어가기 전에 선언된 식별자에 대한 정보를 이미 알고 있기 때문에 스코프의 어느 지점이든 관련된 함수/변수를 참조할 수 있는 것이다. 그렇지만 함수/변수에 상관없이 늘 동일한 규칙이 적용되지는 않는다

- Function Hoisting

함수 호이스팅은 다른 무엇보다 가장 먼저 이루어진다. 그리고 함수 호이스팅은 선언문에만 해당하는데 이는 굳이 어렵게 받아들일 필요가 없다. 함수 표현식은 결국 어떠한 변수로 함수를 할당하는 모양새여서 이것 또한 변수 호이스팅 사례로 볼 수 있기 때문이다. 함수의 선언문은 식별자가 변수 객체에 수집될 때 부가적으로 해당 함수 참조에 대한 초기화까지 자동으로 이루어진다. 그래서 선언된 함수는 상단에서 참조, 호출이 가능하다.

- Variable Hoisting

변수는 프로그램 내에서 크게 세 가지 단계를 거친다.

• 선언 : 파싱 과정에서 변수 객체가 변수에 대한 식별자들을 수집한다.
• 초기화 : 식별자에 메모리를 할당하고 undefined 상태를 부여한다.
• 할당 : 변수 안에 직접 값을 넘겨 준다.

함수 호이스팅 과정에서 함수의 식별자를 선언하고 참조값을 초기화한 것처럼 변수 또한 마찬가지로 선언과 초기화를 해주어야만 값의 참조 및 할당이 가능하다. 다만 변수를 어떻게 선언했는지에 따라 선언, 초기화 시점이 달라질 수 있다는 점을 유의해야 한다.

var 는 호이스팅이 발생하면, 선언과 초기화가 거의 동시에 이루어진다. 실행 시점의 스코프 최상단에서 해당 변수에 대한 메모리가 살아있기 때문에 선언부 위치에 상관 없이 참조, 할당이 가능하다.
let , const 는 호이스팅이 발생하면, 선언만 이루어지고 실행 시점에서 실질적인 선언부를 만날 때까지 초기화는 이루어지지 않는다. 이 간극만큼 해당 변수에 대한 메모리는 존재하지 않기 때문에 선언부 상단에서 참조, 할당이 불가능하다.

let, const 가 동작하는 과정에서 스코프의 진입지점과 해당 식별자의 실질적 선언부 사이를 일시적 사각지대, TDZ(Temporal Dead Zone) 라고 한다. 여기서 변수는 존재하지만, 초기화가 되어있지 않다.

{
  /*
   * Temporal Dead Zone of a
   * a는 이 구간에서 참조할 수 없다.
   * console.log(a) // Reference Error
   */
  let a;
}

호이스팅의 범위를 어디까지 보아야 하는지 의견이 분분하다.
호이스팅은 선언만 포함한다는 쪽이 있는 반면, 선언 - 초기화까지 포함해야 한다는 쪽도 있다. 그래서 let, const는 호이스팅의 범주에 들어갈 수 없다는 것이 그들이 주장하는 바이다.

다음의 코드에서 console.log 를 호출하기도 전에 에러를 반환하는 이유는 결국 해당 문의 실행 전에 let 의 식별자를 관측했기 때문이다.

function a() {}

console.log(a);

let a;
// SyntaxError: Identifier 'a' has already been declared

‘호이스팅은 인접 스코프의 상단에서 선언부를 관측할 수 있는 현상’이라는 처음의 설명에 빗대어 보면 let 과 const 또한 호이스팅 대상이라고 볼 수도 있다.