TDZ (Temperal Dead Zone)

ES
비고
무조건 선언 후에 사용해라 (const, let, class)
Tags
lifecycle
TDZ

변수의 lifecycle

총 3단계로 구성됨
  1. Declaration phase 선언
  1. Initialization phase 메모리 할당 및 undefined로 초기화
  1. Assignment phase 값 할당
 

기존의 문제점 (var)

호이스팅 과정에서 선언문을 위로 끌어올림과 동시에 메모리를 할당하고 undefiend로 초기화까지 한번에 함.
따라서 선언문보다 사용 코드가 앞에 있더라도 에러가 나지 않음.
console.log(a); // undefined가 출력됨. // 10이 출력되진 않지만, 메모리가 할당되어있고 undefined가 담긴 상태이므로 에러는 나지 않음. var a = 10;
notion image

TDZ (Temperal Dead Zone)

💡
선언하기 전에는 사용 못하게 해야해!
  1. 호이스팅으로 변수명을 위로 끌어올림
  1. 선언문 코드를 만나야 그제야 할당 및 undefined로 초기화
 
notion image
 
constlet도 호이스팅 과정은 거치므로 실행 컨텍스트에 등록되어 변수의 존재 자체는 이미 알고 있음.
다만, 초기화 과정을 동시에 하지 않으므로 참조할 수 없다고 referrence error를 띄울 수 있게 됐다.
a // refference error // Cannot access 'a' before initialization let a; // 여기에 와서야 메모리 할당 및 undefined로 초기화함. a // undefined
⇒ 코드상에서 할당 후 사용하는 습관을 들이도록 강제할 수 있다.
 

결론

  • var는 실수의 위험이 있으므로 쓰지마라.
  • constlet을 써라
 

함수의 lifecycle

같이 알아두면 좋다.
함수는 3가지 과정을 호이스팅과 동시에 다 해버림.
따라서 undefined가 담겨있을 일도 없고, 함수는 선언문보다 사용코드가 앞에 있더라도 상관없음.
notion image
notion image
💡
test2는 왜 호출이 안될까요~~? ⇒ const 로 할당한 변수에 화살표 함수를 담은 것이므로, const 라이프사이클로 생각해야 한다!