인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.
쉽게 말해, 코드를 순차적으로 실행하기 전에, 변수와 함수 선언부분을 해당 스코프의 최상단으로 끌어 올려진 것 처럼 작동하게 하는 것이다.
<aside> 💡 실제로 코드가 스코프의 최상단으로 이동 되는것은 아니며, 자바스크립트의 파서(Parser)가 내부적으로 처리하는 것이다.
</aside>
console.log(foo); // undefined
var foo = 123;
console.log(foo); // 123
호이스팅은 자바스크립트의 모든 변수, 함수 선언에 대해 일어난다.
단, **TDZ (Temporal Dead Zone)**의 영향을 받는 구문은 호이스팅이 일어나지 않는 것 처럼 보일 수 있는데, 아래의 코드에서 예시를 볼 수 있다. (TDZ에 대한 설명은 아래에서)
console.log(foo); // Uncaught ReferenceError: foo is not defined
const foo = 123;
TDZ(Temporal Dead Zone)는 ‘일시적인 사각지대’ 라는 뜻으로 직역되며, 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다.
자바스크립트에서 변수는 선언, 초기화, 할당 이라는 3가지 단계에 걸쳐 생성되는데, 이를 보고 아래의 let 변수의 라이프 사이클을 보면 TDZ에 대해 조금 더 쉽게 이해할 수 있다.
선언 단계 (Declaration phase)
변수를 실행 컨텍스트의 변수 객체에 등록하는 단계. 이 변수 객체는 스코프가 참조하는 대상이 된다.
초기화 단계 (Initialization phase)
실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화 된다.
할당 단계 (Assignment phase)
사용자가 undefined로 초기화된 메모리에 다른 값을 할당하는 단계.