[React] TDZ(Temporal Dead Zone/일시적 사각지대)란?

이경하·2022년 8월 31일
0

React

목록 보기
7/10
post-thumbnail

✍️ TDZ(Temporal Dead Zone/일시적 사각지대)란?

👊 TDZ 란?

TDZ 란 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미한다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있다.

TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않는다.

그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 된다.


👊 변수 생성 단계

TDZ 를 이해하기 위해서는 Javascript 의 변수 생성 단계를 먼저 알아야 한다.

  1. 선언 단계 (Declaration phase): 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다.
  2. 초기화 단계 (Initialization phase): 실행 컨텍스트에 등록한 변수를 위한 메모리를 만드는 단계, 메모리가 만들어지면 처음에는 undefined 가 할당된다.
  3. 할당 단계 (Assignment phase): 사용자가 undefined 로 할당된 변수에 다른 값을 할당하는 단계이다.
- var 는 선언과 초기화 단계가 동시에 이루어진다.
- let, const 는 선언, 초기화, 할당 단계가 각각 따로 이루어진다.
- function (함수 선언문) 은 선언, 초기화, 할당 단계가 동시에 이루어진다.

그렇기 때문에 선언과 초기화 단계가 따로 이루어 지는 let, const 같은 경우는 TDZ에 영향을 받을 수 밖에 없다.


👊 TDZ 예시

leejpsd
출처
profile
경듀님

0개의 댓글