호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)

자바스크립트는 변수 선언 방식에 따라 코드 실행 순서와 결과가 달라질 수 있다. 특히 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)개념을 정확히 이해하는 것은 중요하다.

 

호이스팅(Hoisting)이란?

호이스팅은 자바스크립트의 독특한 동작 방식으로, 변수 선언이나 함수 선언이 해당 범위의 최상단으로 끌어올려지는 현상을 말한다. 즉, 변수가 코드에서 선언되기 전에 사용할 수 있는 것처럼 보이는 이유가 호이스팅 때문이다.

호이스팅은 변수 선언과 함수 선언 모두에 적용되지만, 그 방식은 다르다.

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

 

위 코드는 다음과 같이 해석된다:

var x; // 선언이 최상단으로 끌어올려짐
console.log(x); // undefined
x = 5;

 

var로 선언된 변수는 초기화가 되기 전에 undefined로 호이스팅된다.

 

 

함수 선언의 호이스팅

함수 선언도 호이스팅된다. 함수 선언은 변수 선언과 달리, 선언과 동시에 함수 전체가 끌어올려진다. 따라서 함수가 선언되기 전에 호출할 수 있다.

greet(); // "안녕하세요"
function greet() {
  console.log("안녕하세요");
}

이 코드는 문제없이 동작한다. 왜냐하면 함수 선언이 호이스팅되어 `greet` 함수가 코드의 맨 위에 선언된 것처럼 동작하기 때문이다.

 

 

let과 const의 TDZ(Temporal Dead Zone)

var와 달리, let과 const는 호이스팅되지만 TDZ(Temporal Dead Zone) 안에 있을 때는 참조할 수 없다. TDZ는 변수가 선언되기 전까지 해당 변수에 접근할 수 없는 구역을 의미한다.

console.log(y); // ReferenceError
let y = 10;

 

 

위 코드에서 `y`는 호이스팅되지만, 실제 초기화되기 전까지는 접근할 수 없다. 따라서 ReferenceError가 발생한다.

 

 

TDZ의 원인

let과 const는 블록 스코프를 가지며, 변수가 선언되기 전까지는 해당 변수에 접근할 수 없다. 이로 인해 TDZ가 발생하며, 이는 변수가 선언되기 전에 그 변수를 참조하지 않도록 보장해준다.

{
  console.log(a); // ReferenceError
  let a = 5;
}

이 블록 안에서 `let`으로 선언된 변수 `a`는 선언되기 전에 접근할 수 없으며, 이를 통해 예기치 않은 오류를 방지할 수 있다.

 

 

호이스팅과 TDZ

- 호이스팅: `var`, 함수 선언은 모두 호이스팅되며, `var`는 `undefined`로 초기화된다. 함수는 선언과 동시에 끌어올려진다.
- TDZ: `let`과 `const`는 호이스팅되지만, 초기화 전에는 TDZ 안에 있어 참조할 수 없다. 이로 인해 참조 오류가 발생한다.