호이스팅에서의 TDZ(Temporary Dead Zone)

호이스팅에서의 TDZ(Temporary Dead Zone)

자바스크립트에서는 `var`, `let`, `const` 세 변수로 이루어진다.

이 세 변수 모두 호이스팅이 일어나며, var은 선언과 동시에 초기화가 되기 때문에 undefined를 반환하지만 나머지 let과 const의 경우 선언만 될 뿐 초기화가 이루어지지 않는다. 이 단계에서 TDZ에 들어가게 된다.

 

name = 'hello' // ReferenceError: Cannot access 'name' before initialization
let name = 'hi'

위의 코드를 보자, `name`이 호이스팅 되지 않았다면, 두 번째 `let` 선언에서 already declared 에러가 났었어야했는데,

현실은 초기화 하기 전에 액세스 할 수 없다는 에러를 내뱉는다.

function sayHello() {
  return name
}
let name = 'hi'
console.log(sayHello()) // hi

 

위의 코드는 별탈없이 실행이 되어진다. 이 말은 `name`이 분명 호이스팅 된다는 것이다.

let 선언과 동시에 TDZ에 들어가서 초기화가 필요한 별도의 상태로 관리되어진다.

TDZ(Temporary Dead Zone) 이란?

스코프의 시작 지점부터 초기화 시점까지의 구간을 의미한다.

자바스크립트에서는 3단계에 걸쳐 변수를 생성하는데, `선언`, `초기화`, `할당`의 순서로 이루어진다.

1. 선언(Declaration) : 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다.
2. 초기화(Initialization) : 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당하는 값은 `undefined`이다.
3. 할당(Assignment) : 변수 객체에 값을 할당한다.

var는 선언과 동시에 초기화가 이루어진다, 즉 선언과 동시에 undefined가 할당된다는 말이다.

그러나, let과 const는 다르다. 선언만 될 뿐, 초기화가 이루어지지 않아 바로 이 단계에서 TDZ에 들어가게 되는 것이다.

즉, 선언이 되어있지만 초기화가 되지 않아 이를 위한 자리가 메모리에 준비되어 있지 않는 상태라는 것이다.

---

레퍼런스

Home