[Javascript] TDZ

TDZ가 무엇이고 왜 발생할까?

JavaScript의 TDZ(Temporal Dead Zone)는 변수가 존재하지만 아직 값으로 초기화되지 않은 코드의 개념적 영역입니다. 이는 변수 생성(let 또는 const 선언을 통해)과 실제 값 할당 사이의 시간 동안 발생합니다. 이 임시 데드존의 변수에 액세스하려고 하면 런타임 오류가 발생합니다.

 

TDZ는 'let' 및 'const'로 선언된 변수에만 해당되며 초기화 전 호이스팅 및 변수 액세스와 관련된 특정 문제를 해결하기 위해 도입된 메커니즘입니다. 자세한 설명은 다음과 같습니다.

1. 변수 선언:
   • let 또는 const를 사용하여 변수를 선언하면 해당 변수가 해당 범위의 맨 위로 끌어올려집니다. 그러나 'var'로 선언된 변수와 달리 변수는 이 시점에서 초기화되지 않은 상태로 유지됩니다.

console.log(x); // ReferenceError: Cannot access 'x' before initialization

let x;

 

2. 시간적 데드존(TDZ):

• TDZ는 범위(블록 또는 기능)의 시작과 변수에 대한 값의 실제 할당 사이의 기간입니다.
• 이 기간 동안 변수에 액세스하려고 하면 ReferenceError가 발생합니다.

console.log(x); // ReferenceError: Cannot access 'x' before initialization

let x = 10; // Initialization

 

3. 의도하지 않은 액세스 방지:

• TDZ는 값이 할당되기 전에 변수에 액세스하는 경우 오류를 잡는 데 도움이 됩니다. 이렇게 하면 개발자가 실수로 초기화되지 않은 변수에 의존하는 것을 방지할 수 있습니다.

console.log(y); // ReferenceError: Cannot access 'y' before initialization

if (true) {
  let y = 20;
}

 

4. 호이스팅과 초기화 비교:

• 변수가 범위의 맨 위로 끌어올려지는 동안 코드에서 실제 선언문에 도달할 때까지 아직 초기화되지 않습니다.

console.log(z); // ReferenceError: Cannot access 'z' before initialization

if (true) {
  console.log(z); // ReferenceError: Cannot access 'z' before initialization
  let z = 30;
}

 

5. var과 let/const로 선언된 변수:

• 'var'로 선언된 변수는 범위 상단에 'undefine'으로 호이스팅되고 초기화되므로 예상치 못한 동작이 발생할 수 있습니다.
• let 및 const로 선언된 변수는 호이스팅되지만 실제 선언이 나타날 때까지 TDZ에 유지됩니다.

console.log(a); // undefined

var a = 5;

 

console.log(b); // ReferenceError: Cannot access 'b' before initialization

let b = 10;

 

특히 변수 선언에 'let' 및 'const'를 사용할 때 강력하고 오류 없는 JavaScript 코드를 작성하려면 임시 데드존을 이해하는 것이 중요합니다. 개발자는 예상치 못한 런타임 오류를 방지하기 위해 TDZ 내의 변수 액세스에 주의해야 합니다.