[JavaScript] TDZ(Temporal Dead Zone)란?

 

2024.08.26 - [JavaScript] - [JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

[JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

 

Temporal Dead Zone (TDZ)는 JavaScript에서 let과 const 변수를 사용할 때 중요한 개념이다 앞 글에 호이스팅과 스코프도 중요한 개념이므로 한 번 보고오면 더 좋을거같다.

 

TDZ는 변수의 선언이 호이스팅되지만, 초기화되기 전까지 그 변수에 접근할 수 없도록 하는 영역이며, TDZ는 변수의 초기화 전 접근을 방지하여 코드에서 예상치 못한 오류를 방지해줌.

 

또한 TDZ는 변수가 선언된 시점부터 초기화될 때까지의 시간 동안, 변수에 접근할 수 없는 구역이며, 이 구역에서는 해당 변수에 접근하려고 하면 ReferenceError가 발생함.

 

우선은 TDZ의 기본 개념을 알아보자 

TDZ의 범위
- TDZ는 let과 const 변수의 선언문이 코드에 도달하기 전까지 발생하는 영역임.
- TDZ는 변수의 선언이 이루어진 블록 내에서만 적용됨.

TDZ와 호이스팅
- var로 선언된 변수는 호이스팅되지만 TDZ가 없기 때문에 선언 전 접근 시 undefined를 반환함.
- let과 const로 선언된 변수는 호이스팅되지만 TDZ에 있어 초기화 전에는 접근할 수 없음.

 

let 사용 시 기본 TDZ

function testLet() {
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 10; // 변수 'a'는 이 시점에서 초기화.
  console.log(a); // 10 (초기화 이후)
}

testLet();

 

let으로 선언된 변수 a는 선언문이 상단으로 호이스팅되지만 초기화는 선언문 위치에서 이뤄짐. 초기화되기 전 a에 접근하면 ReferenceError가 발생함.

 

TDZ와 블록 스코프 

function testLet2() {
  if (true) {
    console.log(b); // ReferenceError: Cannot access 'b' before initialization
    let b = 10;
    console.log(b); // 10 (초기화 이후)
  }

  console.log(b); // ReferenceError: b is not defined (블록 외부에서는 접근할 수 없음)
}

testLet2();

 

let으로 선언된 변수 b는 블록 스코프를 가지며, 블록 내부에서만 접근할 수 있d 으며, 초기화되기 전 b에 접근하면 ReferenceError가 발생하고, 블록 외부에서는 b를 참조할 수 없음.

 

 

 

TDZ와 함수 스코프

function testLet3() {
  console.log(c); // ReferenceError: Cannot access 'c' before initialization
  let c = 15;
  console.log(c); // 15 (초기화 이후)
}

testLet3();

 

let으로 선언된 변수 c는 함수 스코프를 가지며, 함수 내부에서만 접근할 수 있음. 초기화되기 전에는 c를 접근할 수 없어 ReferenceError가 발생함.

 

 

 

const 사용 시 TDZ

function testConst() {
  console.log(d); // ReferenceError: Cannot access 'd' before initialization
  const d = 20;
  console.log(d); // 20 (초기화 이후)
}

testConst();

 

const로 선언된 변수 d도 호이스팅되지만, TDZ에 의해 초기화되기 전에는 접근할 수 없으며, 초기화 후에야 d를 정상적으로 사용할 수 있음.

 

 

TDZ와 상수

function testConst2() {
  console.log(e); // ReferenceError: Cannot access 'e' before initialization
  const e = 25;
  console.log(e); // 25 (초기화 이후)
}

testConst2();

 

const로 선언된 변수 e는 let과 유사하게 TDZ가 적용되며, 초기화되기 전에는 접근할 수 없고, 초기화된 후에만 접근 가능함.

 

TDZ와 함수 표현식

 

function testConst3() {
  console.log(f); // ReferenceError: Cannot access 'f' before initialization
  const f = function() {
    return 30;
  };
  console.log(f()); // 30 (초기화 이후)
}

testConst3();

 

const로 선언된 함수 표현식 f는 TDZ의 영향을 받으며. 초기화되기 전에는 호출할 수 없고, 초기화된 후에야 정상적으로 호출할 수 있다.

 

TDZ와 다른 변수 선언

function testConst4() {
  {
    let g = 35;
    {
      console.log(g); // ReferenceError: Cannot access 'g' before initialization
      let g = 40; // 블록 내에서 'g'는 또 다른 변수로 간주됨
      console.log(g); // 40 (초기화 이후)
    }
    console.log(g); // 35 (외부 블록의 'g')
  }
}

testConst4();

 

중첩된 블록에서 let으로 선언된 변수 g는 각 블록 내에서 독립적인 변수로 간주됨. 초기화 전에는 TDZ로 인해 ReferenceError가 발생하며, 초기화된 후에만 접근할 수 있다.

 

 

TDZ의 중요성

 

• 예기치 않은 오류 방지: TDZ는 변수가 초기화되기 전까지 접근할 수 없도록 하여, 코드에서 예상치 못한 동작을 방지하고, 이는 코드의 안정성을 높이고, 디버깅을 용이하게 함.
• 명시적인 코드 작성: TDZ는 변수를 사용할 시점을 명확히 하여 코드의 가독성과 유지보수성을 높이며, 초기화된 후에만 변수를 사용하는 것이 권장됨.

 

TDZ (Temporal Dead Zone)

 - let과 const로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구역임.
- 호이스팅: 변수 선언은 호이스팅되지만, TDZ로 인해 초기화되기 전에는 변수에 접근할 수 없음.
- let과 const로 선언된 변수는 초기화되기 전까지 TDZ에 위치하며, 접근 시 ReferenceError가 발생함.

 

 

2024.08.28 - [JavaScript] - [JavaScript] const, var , let 변수 선언 차이점

[JavaScript] const, var , let 변수 선언 차이점