[TIL] TDZ

TDZ(Temporal Dead Zone): 스코프의 시작 지점부터 초기화 시작 지점까지의 구간. (일시적 사각지대)

 

javascript의 변수는 3가지 단계가 있다.

 

선 - 초 - 할

선언(Declaration): 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계.

초기화(Initialization): 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화 된다.

할당(Assignment): 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단게이다.

 var 키워드 변수는 변수 선언전에(var 변수명; 을 만나기 전에) 선언 단계와 초기화 단계를 동시에 진행한다. 그래서 변수를 선언하기 전에 호출해도 undefined로 호출되는 호이스팅이 발생한다.

 반면 let과 const는 호이스팅시 변수를 초기화 하지 않는다. 따라서 실행 컨텍스트에 변수를 등록했지만, 메모리가 할당 되질 않아서 접근할 수 없어, 참조 에러(ReferenceError)가 발생한다. 즉 호이스팅은 되지만 참조 에러가 발생하는 것이다.

 

# 이 코드는 문제가 없다.
let age = 10;
function showYourAge() {
	console.log(age);
}
showYourAge(); // 10

# 이 코드는 문제가 있다.
let age = 10;
function showYourAge() {
  console.log(age);
  let age = 20;
}
showYourAge(); // ReferenceError: Cannot access 'age' before initialization

 호이스팅은 스코프단위로 일어나기 때문에 아래의 코드는 문제가 생긴다.

 

 

class: class 또한 선언 전에는 사용할 수 없다.

constructor() 내부의 super(): 부모 클래스를 상속받았다면, 생성자 안에서 super()를 호출하기 전까지 this 바인딩은 TDZ에 있다.

import 모듈도 호이스팅이 된다.

 

typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인할 때 유용하다.

function doSomething(someVal) {
  // Function scope
  typeof variable; // => undefined
  if (someVal) {
    // Inner block scope
    typeof variable; // throws `ReferenceError`
    let variable;
  }
}
doSomething(true);

 

 

참고 자료

TDZ(Temporal Dead Zone)를 통해 밝혀진 let과 const의 호이스팅(hoisting)

TDZ(Temporal Dead Zone)이란?

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라