[JS-ES6] variables[1] - Temporal Dead Zone(TDZ)

어메이징이보비·2022년 10월 19일

ECMAScript6

목록 보기

2/6

📌 Temporal Dead Zone(TDZ)

Temporal Dead Zone란 한글로 직역하자면 '일시적인 사각지대' 라는 뜻이다.
이 일시적 사각지대는 스코프의 시작지점부터 초기화 시작지점까지의 구간을 말하며 보통 let과 같이 소개되는 개념이다.

var myName = 'bibi';
console.log(myName); // bibi 출력(정상작동)

// undefined 출력되는 상황
console.log(myName);
var myName = 'bibi';

첫번째 상황에서는 잘 출력이 되고있지만 2번째 상황에서는 선언부가 콘솔을 찍는곳보다 하단에 있기때문에 undefined가 출력이 된다. Javascript는 위에서 아래로 코드를 실행시키는데 이론상에는 없는것을 콘솔에 찍어보라고 한것이 되는것이다.
그냥 콘솔에 찍으면 error가 나는 이유는
Javascript가 'Hoisting'이란것을 하기 때문이다.

⭐️ Hoisting

Hoisting은 쉽게말해 Javascript가 프로그램을 실행하기 전에 이것들을 어딘가로 이동을 시킨다는 것을 말한다. 변수들이 제일 위로 미리 끌어올려진다는것이 Hoisting이며 undefined가 나오는 이유는 Javascript가 console에 찍힌 myName을 보고

var Myname;
console.log(myName);
var myName = 'bibi';

내부적으로는 이런식으로 작동이 되기 때문이다.

❗️ 해석과정에서 변수에 대한 선언은 이루어졌는데 값에 대한 정의가 이루어져있지 않아서 undefined가 나오게 된다.
이처럼 Javascript는 해석과정에서 변수(var로 선언된), 함수, import구문 등을 '실행 context' 의 최상단으로 끌어올려 undefined를 할당하는 것이다.

어찌보면 좋다고 생각할 수 있지만 사실 error가 나오지 않는다는것은 개발자 입장에서 오류를 체크하기 어려워질 수 있는 부분중 하나라고 생각한다.
만약 let으로 하게되면 Javascript는 Hoist하지 않게 되고 그 말은 변수가 위로 끌어올려지지 않게 된다. 이것이 let의 Temporal Dead Zone(TDZ)이다.

let myName = 'bibi';
console.log(myName); // bibi 출력(정상작동)

console.log(myName); // Uncaught ReferenceError: myName is not defined. error출력
let myName = 'bibi';

⭐️ 실행 context

실행 context란 '실행 문맥' 이라는 뜻이며 Javascript의 핵심 원리중 하나로 말할수 있고 코드를 읽거나(독해), 내것으로 만들때(이해) 꼭 필요한 요소이다.
문맥은 '언어'라면 어떤 언어에서든지 중요한 부분이다. 문맥을 이해한다면 문장, 나아가 글까지 이해할 수 있을것이다.
이번 챕터는 ES6문법에 관련된 내용을 다루기 때문에 추후 Javascript 챕터에서 '실행 Context'에 대한 글을 자세하게 다루지 않는다.

* 잘 정리해놓으신 다른 개발자분의 글을 참조로 걸었다. 실행 context에 대해 헷갈리는 부분이 있을경우 하단의 블로그를 참조해서 다시 개념을 잡을것이다.