최근 호이스팅에 궁금한 점이 생겨 알아보던 중 잘못된 정보가 블로그에 게시된 경우가 많아서 글을 하나 적게 되었습니다.

var, let, const 의 호이스팅

자바스크립트가 코드를 실행하는 과정에는 크게 선언 단계와 실행 단계로 나뉩니다.
선언 단계에서 코드 내 모든 선언문을 통해 식별자를 실행 컨텍스트에 선언합니다. 이 과정을 호이스팅이라고 합니다.
호이스팅 과정에서 var 키워드의 경우 undefined 로 초기화가 동시에 진행되기 때문에 선언 이전에 호출될 경우에도 에러를 발생하지 않습니다.undefined 라는 초기값이 존재하기 때문입니다.
하지만 let const 의 경우 호이스팅 단계에서 식별자를 저장할 뿐 어떠한 값으로도 초기화 하지 않습니다. 고로 선언문 이전에 호출 시 레퍼런스 에러를 발생시킵니다.

let const 는 호이스팅이 일어나지 않는다?

여기서 '호이스팅이 일어나지 않기 때문에 에러를 발생시킨다' 라고 이해할 수 있지만 호이스팅이 일어나지 않는 것이 아닌 초기화가 일어나지 않기 때문입니다. 자바스크립트라는 인터프리터에서는 코드를 실행시키기 위해서는 모든 식별자에 대한 선언을 진행하고 키워드에 종류에 예외는 없습니다.

TDZ (일시적 사각지대)

let const 키워드의 경우 결국 초기화가 실제 코드 위치에서 이루어지기 때문에 식별자가 저장된 실행컨텍스트 렉시컬 환경의 최초 지점부터 코드 상의 선언까지의 구간을 TDZ(일시적 사각지대)라고 합니다. 반대로 var 키워드의 경우 TDZ가 존재하지 않죠.

함수 선언식과 표현식

이 부분이 이번에 제가 헷갈려서 구글링하게 된 부분입니다. 함수 선언식의 경우 선언문 이전에 호출이 가능하고 표현식의 경우 선언문 이전에 호출이 불가능하여 '표현식은 초기화가 일어나지 않는가?' 에 대해 궁금했습니다.
제가 알게된 지식을 공유하고자 글을 적습니다.

함수 선언식의 경우 function 키워드로 함수를 선언하는 데 function 키워드는 실행컨텍스트에 식별자명 : f{} 형태로 초기화가 이루어집니다. 고로 선언문 이전에 호출이 가능합니다.
함수 표현식(=arrow function)의 경우에는 var let const 키워드를 사용하여 선언하며 이 역시 일반적인 변수와 동일하게 let const 키워드를 사용하여 선언하고 미리 호출할 경우 레퍼런스 에러가 발생하게 됩니다.

마치며

호이스팅은 자바스크립트의 원리를 쉽게 설명 & 이해하기 위한 용어입니다. 호이스팅을 이해하는 과정에서 '마치 위로 끌어올려지는 듯한' 등의 추상적인 설명으로 오해석하게 되고 이를 바탕으로 잘못된 정보가 게시되고 전파되는 현상이 발생한 것으로 예상되는 데요. 호이스팅이라는 용어를 이해하기보다 자바스크립트의 동작 원리를 이해하기 위해 포커스를 맞추어야 하지 않을까 라는 생각을 합니다.