[JS] 호이스팅과 TDZ(Temporal Dead Zone)

호이스팅은 변수 선언이 마치 '끌어올려지는' 것처럼 보이는 방식이다. 현재 실행되는 Line 아래에서 선언된 변수가 위에서 참조되는 JS에서의 특수한 상황이다.

hoisting

 

1. 변수 호이스팅

- var

console.log(hoi)

var hoi = "a"

//undefined

일반적인 언어에서는 선언되지 않은 a를 참조했으니, 에러가 발생하며 실행이 멈추겠지만,  JS환경에서는 프로그램이 멈추지 않고 undefined를 출력하며 작동한다.
선언만 작동하고 할당은 그대로 남아있는 것.

이는 어휘적 논리 환경(Lexical environment)의 특수한 특징 때문에 발생하는데, var와 같은 선언문이 JS코드 실제 실행보다 먼저 처리되기 때문이다.

 

- let, const

모던 자바스크립트에서는 TDZ(Temporal Dead Zone)를 이용해 선언되기 전에 참조하는 것을 막고 있다.

console.log(b); // ❌ 

let b = 10;

//ReferenceError: Cannot access 'b' before initialization

TDZ(Temporal Dead Zone)란 let, const를 이용한 선언을 했을 때 선언문 위에서 변수를 참조하는 것을 막는 기능이다.

실제로 어휘적 논리 환경(Lexical environment)에서는 변수 b를 선언하도록 동작하지만, 사용하지 못하도록 막아놓은 상태인 것이다.

 

2. 함수 호이스팅

함수 선언문

let, const의 동작에 대해 TDZ로 막아뒀지만 함수에 대해서는 호이스팅을 제한하지는 않는다. ( TS도 똑같음 )

sayHi(); // Hello!

function sayHi() {
  console.log("Hello!");
}

함수에 대해서는 뒤에 선언되었더라도 정상적으로 동작한다.

 

함수 표현식

표현식으로 선언된 함수에 대해서는 호이스팅되지 않는다.

sayHi(); // ❌ TypeError: sayHi is not a function

var sayHi = function() {
  console.log("Hello!");
};

var로 초기화한 함수 표현식의 경우에는 참조는 가능하지만 실행한다면 오류가 발생하게 된다.

 

3. 요약

선언 방식	호이스팅 여부	값 상태	TDZ 여부	참조 가능 시점
var	O	undefined	X	선언 이전에도 가능
let	O	초기화되지 않음	O	선언 이후부터 가능
const	O	초기화되지 않음	O	선언 이후부터 가능
function	O	전체 함수	X	어디서든 참조
함수 표현식 (var)	O	undefined	X	선언 이전에도 가능
함수 표현식 (let, const)	O	초기화되지 않음	O	선언 이후부터 가능