JavaScript의 호이스팅과 TDZ (Temporal Dead Zone)

기술 면접을 진행하다, 호이스팅에 대한 질문을 받았다.
호이스팅이 어떠한 현상이며, 이로 인해 예상치 못한 에러가 발생할 수 있다는 점,
또한 var 을 통한 변수 선언이 아닌 let, const 을 통해 선언 시 이를 피할 수 있다는 점에 대해 집중적으로 설명드렸다.

대답 이후 이와 관련된 추가 꼬리 질문을 받게 되었다. 질문 내용은

• var 은 왜 호이스팅이 일어나는 지 더 자세하게 설명해줄 수 있는지?
• TDZ 의 개념에 대해 알고 있는지?
• 알고 있다면 이를 연관지어 설명해달라!

확실히 알고 있지 않은 내용들에 대해 연이어 질문을 받게 되자, 입이 얼어붙어 뭐라 답했는 지 기억도 잘 나지 않는다 😂 면접 종료 후 내가 몰랐던 부분에 대해 알아보고, 블로그에 정리해 놓으려 한다.

호이스팅이란?

• JavaScript 에서 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 동작
• var 로 선언한 변수의 경우, 변수 선언 전 접근 가능

console.log(x); // undefined
var x = 5;

• let const 로 선언한 변수의 경우, 변수, 선언 전 접근 시 에러 발생

console.log(y); // ReferenceError: y is not defined
let y = 10;

• 함수 선언식의 경우 전체가 호이스팅되어 선언 전 함수 호출 가능

sayHello(); // "Hello, world!"
function sayHello() {
    console.log("Hello, world!");
}

• 함수 표현식의 경우 변수는 호이스팅되지만, 할당된 함수 부분은 호이스팅되지 않아 호출 불가

sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
    console.log("Hi!");
};

TDZ?

TDZ(Temporal Dead Zone)

• 일시적 사각지대. 변수가 선언되었지만, 초기화되지 않아 접근할 수 없는 영역
• let 과 const는 var 과 동일하게 선언이 끌어올려지는 호이스팅이 발생하지만, 이 TDZ에 머물러 있기 때문에 접근 시 에러가 발생하는 것

그렇다면 왜 이런 차이점이 발생하는가?

이는 변수의 라이프사이클과 연관이 있다.

• var 변수는 선언과 동시에 초기화되며, 호이스팅 시에 선언부와 초기화 부분이 함께 끌어올려진다. 따라서 변수에 접근 시 에러 발생 없이 undefined로 평가된다.

• let과 const 변수는 호이스팅되지만 초기화는 선언부에 도달했을 때 이루어지고, 선언 이전에 변수에 접근하면 TDZ에 들어가서 ReferenceError가 발생한다.