호이스팅

호이스팅

호이스팅은 변수를 선언하고 초기화했을 때 변수의 선언 부분이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특성이다. 자바스크립트는 모든 선언(var, function, let, const, class)을 호이스팅한다. 하지만 var와 달리 let과 const로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생한다. 변수의 생성과정을 먼저 보면 이해하기 쉽다.

1. 선언 단계 : 실행 컨텍스트의 변수 객체에 등록(이 변수 객체는 스코프가 참조하는 대상이 됨)
2. 초기화 단계 : 변수 객체에 등록된 변수를 위한 메모리 공간 확보, 해당 변수는 undefined로 초기화됨
3. 할당 당계 : undefined로 초기화된 변수에 실제 값 할당

var 키워드로 변수를 선언하면 선언 단계와 초기화 단계가 한 번에 일어난다.

console.log(say); // {1} undefiend 
var say; // {2}
console.log(say); // undefined
say = 'hi'; // {3}
console.log(say); // {4} 'hi' 

{1} 에서 참조 에러(Refference Error)가 아닌 undefined과 반환된 것은 {2} 선언 부분이 호이스팅되어 undefined로 초기화되기 때문이다.

그리고 {3} 에서 비로소 'hi'가 할당되어 {4} 에서 값이 출력된다.

 

이와 달리 let은 선언 단계와 초기화 단계가 따로 일어난다. 선언 단계에서 스코프에 변수를 등록하지만 초기화는 변수 선언문에 도달 했을 때 일어난다.

console.log(say); // {1} ReferenceError: say is not defined
let say; // {2}
console.log(say); // {3} undefined
say = 'hi'; // {4}
console.log(say); // {5} 'hi'

{2} 에서 선언된 변수 say는 {1} 에서는 아직 초기화(변수를 위한 메모리 공간 확보와 undefined로 초기화)가 되지 않은 시점이기 때문에 변참조 에러가 발생한다. {2} 까지 내려오면(변수 선언문에 도달) 비로소 초기화 단계가 실행되어 {3} 에서 undefined가 반환된다. 그리고 {4} 에서 값이 할당 되면 {5} 에서 해당 값을 반환 받을 수 있다.

이렇게 스코프의 시작 지점부터 변수가 초기화 되기 전 까지의 구간을 일시적 사각지대(Temporal Dead Zone)이라 한다.

 

함수의 경우 함수선언식으로 정의한 경우 함수식이 통째로 호이스팅된다.

참고

PoiemaWeb

MDN