[JavaScript]호이스팅(hoisting)

자바스크립트에서 호이스팅(hoisting)은 변수 및 함수 선언이 코드 내에서 물리적 위치에 상관없이, 스코프 상단으로 "끌어올려지는" 것을 의미한다.

 

변수 및 함수 선언은 코드에서 한 줄씩 순차적으로 진행되는 것이 아니며, 코드 실행 전 단계에서 이루어진다.

 

var, let, const, function 등 키워드를 사용하는 선언하는 경우 그 식별자는 모든 것이 호이스팅된다.

 

하지만 호이스팅이 된 후의 실행결과에 차이가 있다.

 

 

 

 

console.log(x);

var x = 10;

console.log(x);

 

위의 코드의 실행 결과는 어떻게 될까? 결과는

 

undefined

10

이 출력되게 된다.

 

위의 코드의 경우에는 변수 x의 선언이 console.log(x); 이후에 작성되어있다. 호이스팅에 의해서 변수x의 선언은 이미 코드 실행 전에 이루어진다. 선언만 호이스팅이 되기 때문에 10으로 초기화된값은 저장되지 않는다.

그래서 undefined가 먼저 출력되고 이후의 10으로 초기화가 되기에  다음 console.log(x); 명령에 결과가 10이 나오는 것이다.

 

 

 

 

console.log(x);

let x = 10;

console.log(x);

 

이번에는 변수의 선언 예약어를 let으로 바꿨다. 

마찬가지로 호이스팅이 발생하기에 var와 마찬가지로 undefined 10 이 출력될 것이라 생각할 수 있지만

 

ReferenceError: Cannot access 'x' before initialization

위와 같은 참조 에러가 발생한다.

변수 x가 초기화 이전에는 접근할 수 없다는 이유다.

에러가 발생하는 이유는 TDZ(Temporal Dead Zone) 때문이다.

 

TDZ란 변수가 선언된 후 초기화되기 전까지의 상태를 가리키는 용어이다.

let에는 TDZ가 적용되어 호이스팅에 의해 변수는 선언이 되었지만, 초기화가 되지 않은 상태이다.

TDZ에 해당 된 변수는 접근을 할 수 없게 설정이 되어있다.

 

let과 const에 TDZ가 적용된다.