변수 선언 삼형제 var, let, const (feat. TDZ(Temporal Dead Zone))

 

 

자바스크립트의 변수 선언할 때 제일 처음 배우는 var, let, const.... 이 셋을 집중비교해보면 TDZ라는 용어가 나온다..! TDZ에 대해 알아보자. 🤔👊🏻

 

✨var vs. let vs. const

특성	var	let	const
범위(Scope)	함수 범위 또는 전역 범위	블록 범위	블록 범위
재선언(Redeclaration)	가능	불가능	불가능
재할당(Reassignment)	가능	가능	불가능
호이스팅(Hoisting)	선언과 초기화가 함께 이루어짐	선언만 호이스팅, 초기화는 이루어지지 않음	선언만 호이스팅, 초기화는 이루어지지 않음
일시적 사각지대(TDZ)	해당 없음	해당됨	해당됨

❓TDZ(Temporal Dead Zone)란

• let과 const로 선언된 변수가 호이스팅되는 과정에서 발생하는 일시적인 사각지대를 의미한다.
• 변수는 선언, 초기화, 할당의 3단계를 거치는데, TDZ는 변수의 선언부터 초기화까지의 구간을 말한다.

📍TDZ의 동작 방식

변수 선언 전)

• let과 const로 선언된 변수는 TDZ 내에 존재하게 된다.
• 이 구간에서 변수에 접근하려 하면 ReferenceError가 발생한다.

변수 선언 및 초기화)

• 변수가 선언되고 초기화되면 TDZ에서 벗어나게 된다.
• 이후에는 변수에 정상적으로 접근할 수 있다.

📍TDZ의 목적

• TDZ의 주요 목적은 프로그래밍 오류를 줄이는 것
• 변수 선언 전에 변수에 접근하려 하면 ReferenceError가 발생하여, 개발자가 오류를 쉽게 발견할 수 있다.

// TDZ 예시 코드
console.log(myVar); // TDZ에 들어섰다는 ReferenceError 발생
let myVar = 10;

// var로 선언하는 경우
console.log(myVar); // undefined
var myVar = 10;

 

 

✨var 변수 호이스팅

• var 변수는 선언전에 선언과 초기화를 동시에 진행한다.
• 변수 선언이 최상단으로 끌어올려지지만, 초기화는 원래 위치에서 이루어진다.
  → 변수 선언 전에 접근하면 undefined 반환

✨let, const 호이스팅

• let과 const 변수는 선언단계와 초기화 단계가 분리되어서 진행된다.
• 선언만 호이스팅되고 초기화는 되지 않는다.
  → 일시적 사각지대(Temporal Dead Zone, TDZ) TDZ 내에서 변수에 접근하면 ReferenceError가 발생한다.