호이스팅(hoisting)

 

1. 변수 호이스팅

 

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

 

let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조 에러 (ReferenceError) 가 발생함.

 

console.log(z);	// undefined
var z;

 

var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계" 와 "초기화 단계" 가 한번에 진행됨.

선언 단계에서 실행 컨텍스트의 렉시컬 환경, 즉 스코프에 변수 식별자를 등록하여 자바스크립트 엔진에 변수의 존재를 알림 👉🏻

그리고 즉시 초기화 단계에서 undefined 로 변수를 초기화함. 👉🏻 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하기 땜에 에러가 발생 안 함. 👉🏻 다만 undefined 를 반환함! 이후, 변수 할당문에 도달하면 비로소 값이 할당될 것.

 

// var 키워드로 선언한 변수는 런타임 이전에 선언 단계와 초기화 단계가 실행됨
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo);	// undefined

var foo;
console.log(foo);	// undefined

foo = 1;	// 할당문에서 할당 단계가 실행됨
console.log(foo);	// 1

 

let 키워드로 선언한 변수는 "선언 단계" 와 "초기화 단계" 가 분리되어 진행됨.

즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행됨. let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점 (변수 선언문)까지 변수를 참조할 수 없다.

 

스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 (Temporal Dead Zone: TDZ) 라고 부름.

 

😺 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않나요?

-> 놉. 호이스팅 발생합니다.

 

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

 

위 코드처럼 let 키워드로 선언한 변수도 여전히 호이스팅이 발생하기 때문에 참조 에러 (Reference Error) 가 발생함.

자바스크립트는 ES6 에서 도입된 let, const 를 포함해서 모든 선언 (var, let, const, function, function*, class 등) 을 호이스팅 함.

단, ES6 에서 도입된 let, const, class 를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작함.

 

!...결론...!

 

변수 선언 3단계 : 선언 -> 초기화 -> 할당

 

호이스팅은 변수를 선언하고 초기화 했을 때, 선언 단계가 최상단으로 끌어올려지는 현상을 말함.

var의 경우 변수를 선언하고 초기화 하는 과정이 동시에 일어나서 호이스팅이 발생함!

반면, let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다.

실행 시점에서 실제 선언 단계를 만날 때 초기화가 이뤄짐.

그 사이의 시간을 일시적 사각지대 (Temporal Dead Zone: TDZ) 이라고 한다.

즉, 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 참조 에러 (Reference Error) 가 발생한다.

함수 호이스팅은 선언문에서 발생한다.

선언된 함수는 상단에서 참조, 호출이 가능하다.

함수 표현식은 결국 변수에 할당하는 모습이라 변수 호이스팅의 사례로 볼 수 있다.