변수 호이스팅

var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

 

console.log(test); // ReferenceError: test is not defined
let test;

 

이처럼 let 키워드로 선언한 변수를 선언문 이전에 참조하면 참조에러가 발생한다.

var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에의해 암묵적으로 선언 단계와 초기화 단계가 한번에 진행된다. 즉, 선언 단계에서 스코프에 변수 식별자를 등록하여 자바스크립트 엔진에 변수 존재를 알린다. 그리고 즉시 초기화 단계에서 undefined로 변수를 초기화한다. 이와 반대로 let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행한다. 만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.

 

let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문) 까지 변수를 참조할 수 없다. 이 구간까지를 일시적 사각지대 Temporal Dead Zone (TDZ)라고 부른다.

 

console.log(test); // ReferenceError: test is not defined

let test; // 변수 선언문에서 초기화 단계 실행
console.log(test); // undefined

test = 7; // 할당문에서 할당 단계 실행
console.log(test); // 7

 

맨 처음에 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보인다고 하였는데 이것을 확인해보자.

 

let test = 1; // 전역변수

{
    console.log(test); // ReferenceError: Cannot access 'test' before initialization
    let ftest = 2; // 지역변수
}

 

만약 let 키워드로 선언한 변수가 호이스팅이 발생하지 않는다면 위 코드는 전역 변수 foo의 값을 출력해야 한다. 하지만 let 키워드로 선언한 변수도 호이스팅이 발생하기 때문에 참조 에러가 발생한다.