[ JavaScript ] Var, Let, Const 변수의 호이스팅과 TDZ(Temporal Dead Zone)

개요

JavaScript를 공부하다 보면 꼭 만나게 되는 키워드가 있습니다. 바로 var, let, const 입니다. 이들과 함께 자주 나오는 호이스팅과 TDZ(Temporal Dead Zone) 개념까지 깔끔하게 정리하기

목차

1. var, let, const 차이점
2, 호이스팅이란?
3. TDZ(Temporal Dead Zone)란?
4. 왜 var를 지양해야 할까?
5. 실무에서의 팁

1. var, let, const의 차이점

출처: mbloging

키워드	스코프	재선언	재할당	호이스팅
var	함수 스코프	O	O	O (초기값 undefined)
let	블록 스코프	X	O	O (TDZ존재)
const	블록 스코프	X	X	O (TDZ존재)

🔸 var

• 재선언 가능, 재할당 가능
• 함수 스코프를 가짐 ({} 안에서는 스코프 무시)
• 호이스팅 시 undefined로 초기화

// var
function example() {
  if (true) {
    var a = 10;
  }
  console.log(a); // 10
}

🔸 let

• 재선언 불가, 재할당 가능
• 블록 스코프 (중괄호 {} 내에서만 유효)
• 호이스팅은 되지만 TDZ 구간 때문에 선언 전 접근 불가

// let
if (true) {
  let b = 20;
}
console.log(b); // ReferenceError

🔸 const

• 재선언 불가, 재할당 불가
• 블록 스코프
• 주로 상수를 선언할 때 사용

// const
const c = 30;
c = 40; // TypeError: Assignment to constant variable.

 

2. 호이스팅 (Hoisting) 이란?

호이스팅은 선언이 코드의 최상단으로 끌어올려지는 현상을 말합니다.

var 호이스팅

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

// 내부적으로 처리 결과
var x;
console.log(x); // undefined
x = 5;

let 과 const 호이스팅

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

let 과 const도 호이스팅은 되지만 초기화되지 않아서 접근이 불가능합니다. 이 부분이 바로TDZ 때문입니다.

 

3. TDZ(Temporal Dead Zone)란?

출처: dmitripavlutin

TDZ는 일시적 사각지대 라고 부릅니다. let 과 const로 선언된 변수는 선언 이후 초기화되기 전까지 TDZ 상태에 놓이게 됩니다.

TDZ 구간 예시

{
  // TDZ 시작
  console.log(z); // ReferenceError 발생
  let z = 15;     // TDZ 끝 (여기서 z가 초기화됨)
}

TDZ에 있는 z 는 TDZ에 있다. 
TDZ에 있는 z 에 접근하게 되면, ReferenceError 가 난다.

- var : 호이스팅 되고 undefined로 초기화
- let / const : 호이스팅 되지만 TDZ 구간 때문에 선언 전 접근 불가

4. 왜 var를 지양할까?

실제 발생하는 버그 예시

function buggy() {
  if (true) {
    var foo = 1;
  }
  console.log(foo); // 1 (의도치 않은 범위 확장)
}

블록 스코프가 무시되어 외부에서도 접근 가능한 문제 발생

5. 실무에서 추천하는 패턴

- const 를 기본값으로 사용하고 필요한 경우에만 let 으로 선언
- TDZ를 활용해 코드의 안전성 확보

// [GOOD]
const name = "Alice"; // 고정값
let age = 30; // 변화하는 값

// [AVOID]
var name = "Bob";

 

마무리

var, let, const 는 단순히 문법 차이로 끝나지 않고 코드 안전성, 유지보수성, 버그 예방과 직결되는 중요한 부분입니다.
언제 어떻게 써야 하는지, 왜 var 대신 let과 const가 권장되는지 이해하기
호이스팅과 TDZ까지 함께 이해하며 버그를 줄이고 안전한 코드를 작성하기
값을 재할당할 일이 없다면 const 를 기본으로 사용하고, 값이 변할 필요가 있을 때만 let을 사용하는 것이 일반적인 패턴입니다.

 

추가 참고 링크

https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/