[JavaScript] 자바스크립트 호이스팅에 대해 간단하게 설명하기

호이스팅 hoisting 이란 자바스크립트에서 코드가 실행되기 전 변수 선언과 함수 선언을 코드 맨 위 최상단으로 끌어올려 동작하는 것을 말한다.

 

호이스팅으로 인해 코드의 선언 위치와 무관하게 변수를 사용할 수 있는 것처럼 보일 수 있는데 선언 측면에서의 이야기인 것이지 변수의 값 얼로케이션까지 최상단으로 끌어올리듯 동작하는 것이 아님을 주의해야한다. 

 

함수를 사용한 후 함수에 대해 선언해도 함수 호출 자체에 대한 문제가 없는 것이 호이스팅이라면

 

var로 선언하고 할당한 변수를 선언문 전에 출력하면 초기화된 것이 아니라서 undefined 으로 출력되고 선언문이 작동한 후 출력해야 할당된 값이 정상적으로 출력된다는 것을 주의해야한다. 

 

let 과 const에 대해 호이스팅이 작동하기는 하지만 선언문 이전에 액세스하려고 하면 reference error가 발생한다. 그 이유는 TDZ라는 temporal dead zone이 원인이다. tdz는 변수 선언 후 초기화되기 전끼지의 구간을 말하고 var과 달리 let과 const에는 tdz가 존재해서 tdz일 때는 변수에 접근하면 에러가 발생한다. 그래서 변수에 대한 선언이 호이스팅 되었음에도 선언이 실제로 이루어지지는 않고, tdz가 초기화될 때까지 변수 사용을 막는다. 

 

정리하면 호이스팅은 변수와 함수 선언을 코드 상단으로 끌어올려주는 듯 하게 동작한다

하지만 var일 때는 선언만 호이스팅되기 때문에 초기화 전에 접근하면 undefined가 되고 let이나 const는 호이스팅된 가선언 위치와 진선언 사이 tdz 구역이 존재하기 때문에 초기화 전에 액세스하면 reference error가 발생하는 것이다.