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 scopetypeof variable;// => undefinedif (someVal) { // Inner block scopetypeof variable;// throws `ReferenceError`let variable; } } doSomething(true);
참고 자료
TDZ(Temporal Dead Zone)를 통해 밝혀진 let과 const의 호이스팅(hoisting)
Javascript 변수 키워드에는 var, let, const가 있다.var는 한번 선언된 변수를 다시 선언할 수 있다.var는 선언하기 전에 사용할 수 있다. 바로 호이스팅(hoisting)이 일어나기 때문이다.많은 Javascript 서적
velog.io