0. 개요

호이스팅은 무엇이고 어떤 역할을 하는지, 예외가 되는 케이스 TDZ란 또 무엇인지를 알고 적절한 사용법을 알고자 한다.

1. Hoisting이란 무엇인가

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스, 임포트의 선언문을 범위의 맨 위로 이동시키는 과정

호이스팅이란, 변수, 함수 선언을 유효범위 최상단으로 끌어올려주는 JS의 특징이다. 크게 세가지 방식으로 유효 활용되는데,

1. 변수가 선언되는 줄 이전에 변수 값을 사용할 수 있는 경우
2. 변수가 선언되는 줄 이전에 참조할수는 있지만, 값이 Undefined인 경우
3. 변수가 선언되는 줄 이전에 참조하면 ReferenceError가 발생하는 경우

일반적으로, 함수 선언식과 import선언이 첫번째 유형으로 호출되고,
var 선언은 두번째 유형으로 호출되며,
let, const, class 선언은 세번째 유형으로 호출된다.

2. TDZ

그렇다면, 세번째 유형인 변수가 선언되는 줄 이전에 참조하면 ReferenceError이 발생하는 경우, 호이스팅 되지 않는다고도 볼 수 있겠지만, 다음과 같은 예시를 보면 어떠한 형태의 호이스팅이 발생하는것을 알 수 있다.

let a = 10;
{
  console.log(a) // output: 10
}
{
  console.log(a) // ReferenceError: Cannot access 'a' before initialization
  let a = 20;
}

만약 어떠한 형태의 호이스팅도 발생하지 않는다면, 두번째 console.log(a) 또한 10의 값을 뱉어냈겠지만, let a = 20에서 호이스팅되어 Reference Error를 뱉어내는것을 볼 수 있다.
이러한 상황은 변수가 선언되고, 초기화 되기 전의 범위. Temporal Dead Zone, DTZ에 있다고 표현하는데, 이 구간에서는 참조 에러를 발생시킨다.

3. 정리

가능한한 var대신 let이나 const를 사용하고, function을 이용한 함수 선언식 대신 함수 표현식이나 화살표함수를 이용하도록 해서 호이스팅의 활용을 최소화하는 편이 예상치 못한 결과를 내는 경우를 줄일 수 있어 현명하다고 보여진다.