var, let 키워드의 변수 생성과정과 TDZ(일시적 사각지대)

변수의 생성과정

• 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
• 초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.
• 할당 단계(Assignment phase) :  사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 입니다.

 

var

// var키워드는 런타임 이전에 선언 단계와 초기화 단계가 실행된다
// 변수선언문 이전에 변수를 참조할 수 있다.
console.log(name) // undefined

var name; 
console.log(name) // undefined

name = mike; // 할당단계
console.log(name) // mike

• var키워드는 런타임 이전에 선언과 초기화과 동시에 일어나기 때문에 메모리에 바로 undefinde가 저장된다. 그래서 변수 선언 이전에 변수를 참조할 수 있고, 변수를 호출하면 초기화된 값 undefinde가 출력된다.
• 3번째 줄에서 변수에 값이 할당되고 mike를 출력할 수 있다

 

 

let

// 런타임 이전에 선언 단계가 실행되지만 변수 초기화는 되지 않는다
// 초기화 이전의 일시적 사각단계에서는 변수를 참조할 수 없다
console.log(name) // ReferenceError : name is not defined

let name;  // 변수 선언 단계에서 초기화 단계가 실행된다
console.log(name) // undefined

name = mike; // 할당단계
console.log(name) // mike

• let키워드는 선언과 초기화가 분리돼 있다. let도 호이스팅 되면서 런타임 이전에 선언단계가 이뤄지지만 초기화 단계(메모리 할당)가 되지 않는다. 그래서 변수 선언 이전에 변수를 호출하면 참조에러가 발생한다.
• 변수가 선언되기 전까지 일시적 사각지대(TDZ)가 존재한다. 이 구간에서는 변수를 출력하면 참조에러가 발생한다.

 

TDZ

Temporal Dead Zone
변수의 선언과 초기화(메모리 할당) 사이의 접근할 수 없는 지점!!
let, const는 TDZ에 영향을 받는다 let, const가 호이스팅 되어서 최상위에 선언된 것처럼 되었다고 해도
변수에 값이 할당이 되기 전까지는 사용할 수 없도록 만들어 놓은 것이 TDZ이다
코드를 예측 가능하게하고, 예측불가능한 버그들을 줄일 수 있다

let과 const는 var 과 다르게 선언 단계와 초기화 단계가 따로 분리되어 실행된다.

그래서 선언 단계와 초기화 단계 사이에서는 변수를 등록했지만 메모리가 할당되지 않은 상태라 “ReferenceError”가 나오게 된다. 이런 사각지대를 TDZ라고 한다.