TDZ 와 호이스팅(Hoisting)

 

호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미하며. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 한다.
따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있으며 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 된다

 

TDZ는 Temporal Dead Zone의 약자로  일시적인 사각지대란 뜻을 가진다.

일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고 부릅니다.

출처:https://developer.mozilla.org/ko/docs/Glossary/Hoisting

 

자바스크립트에서의 변수는 선언, 초기화, 할당이라는 3가지 단계의 걸쳐서 생성됩니다.

 

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

 

변수를 생성할 때에는 자바스크립트가 이러한 실행동작을 하면서 변수를 선언하는 것이었다.

 

var변수의 라이프 사이클

var 키워드 변수는 변수 선언 전에 선언 단계와 초기화 단계를 동시에 진행합니다.

그래서 javascript는 실행 콘텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만듭니다.

그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생하는 것이다.

 

다음으로 let라이플 사이클에 대해 알아보자.

 

let 라이프 사이클

let 또는 const 키워드로 선언된 변수는 var 키워드와는 다르게 선언단계와 초기화 단계가 분리되어서 진행이 됩니다.

그렇기 때문에 실행 콘텍스트에 변수를 등록했지만,

메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생하는 것이고,

이것을 보고 우리가 호이스팅이 되지 않는다?라고 오해할 수밖에 없었던 것입니다.

 

TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말합니다.

즉, let 또한 선언 전, 실행 콘텍스트 변수 객체에 등록이 되어 호이스팅이 되지만,

이 TDZ 구간에 의해 메모리가 할당이 되질 않아 참조 에러(ReferenceError) 발생하는 것입니다.

 

Function 키워드 함수는 아래 사진과 같이 변수선언 3단계를 동시에 진행해 버린다,

 

function 라이프 사이클

참고사항

출처: https://noogoonaa.tistory.com/78