호이스팅(Hoisting)이란?

호이스팅이란 자바스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 최상위로 끌어올리는 것을 의미한다. 모든 선언(var, let, const, func, class)이 포함된다.

변수 호이스팅

하지만 let 과 const를 이용하여 호이스팅을 진행하면 참조에러가 발생한다.
그 이유는 변수는 선언-> 초기화-> 할당 에 걸쳐 생성되는데
var은 선언과 초기화가 한번에 진행되지만
let, const는 선언과 초기화가 분리되어 진행이 되기 때문이다.
이러한 특성때문에 let으로 선언된 변수는 스코프가 시작된 시점부터 변수의 선언지점 까지 일시적 사각지대(Temporal Dead Zone)이 존재한다.

// 스코프의 시작단계에서 변수의 선언과 초기화(undefined)가 동시에 진행이된다.
console.log(A) // undefined
var A;
console.log(A) // undefined
A = 1;
console.log(A) // 1

// 스코프의 시작단계에서 선언이 된다.
// 하지만 초기화(메모리의 공간 확보와 undefined로 초기화)가 진행되지 않음
----- TDZ -----
console.log(B) // ReferenceError: B is not defined
----- TDZ -----
let B;
console.log(B) // undefined
B = 1;
console.log(B) // 1

함수 호이스팅

함수 선언식과 표현식에 따라 차이가 발생한다.

// 함수 선언식
function A() { return 1;}
// 함수 표현식
let A = function() { return 2;}

함수 선언식은 코드가 실행되기 전에 로드(호이스팅)이 되지만
함수 표현식은 해당 표현식에 인터프리터가 도달을 해야 로드가 된다.
그러므로 함수 표현식은 정의된 범위안에서 로컬 변수의 복사본을 유지가 가능하다. 즉 클로져를 생성할 수 있다.