[JavaScript] 호이스팅(Hoisting)

Hoisting

 

 

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 변수의 몇 개의 타입들이 선언문이 나오기 전에, 사용할 수 있는 특성을 말합니다. 

실행이 시작하기 전에, 코드는 변수 선언문들을 scan하고 코드에서 찾은 변수에 대해, 변수 환경 object에 새로운 속성이 생성됩니다. 

 

함수 선언은 변수 환경 객체에 저장되기 때문에 실제로 코드에서 선언되기 전에 사용할 수 있습니다. 

var 키워드도 마찬가지로 호이스팅이 가능한데 선언된 값을 얻지 못하지만 undefined로 정의 됩니다.

 

하지만 var 키워드로 선언된 변수와는 달리 let과 const 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생합니다. let, const로 선언된 변수는 호이스팅이 안되는데 이는 let, const 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 액세스 할 수 없는 공간인 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문입니다.

함수 실행과 화살표 함수 실행은 키워드의 사용으로 인해 달라지게 됩니다. 

위의 예시를 보면 const 키워드로 선언한 job 변수 선언전에 job을 이용하면 TDZ가 생성됨으로써 에러가 일어나게 되는데 TDZ가 생겨나게된 이유는 선언전에 변수를 이용하면 undefined로 인해 심각한 bug를 발생시키고 에러를 찾기 힘듬으로 선언 전에 변수를 사용하는 습관을 피하고 에러를 쉽게 잡아내기 위해서입니다.