Notice
Recent Posts
Recent Comments
관리 메뉴

즐겁게, 코드

변수의 호이스팅, 그리고 TDZ의 함정 본문

💬 언어/Javascript

변수의 호이스팅, 그리고 TDZ의 함정

Chamming2 2021. 4. 11. 21:05

토스트 UI 팀의 "TDZ을 모른 채 자바스크립트 변수를 사용하지 말라" 글을 읽고, 오늘도 변수를 스스럼없이 사용한 것을 반성했습니다.

TDZ(Temporal Dead Zone) 는 초기화되지 않은 변수가 저장되는 곳인데요, 오늘은 TDZ와 변수에 대한 얘기를 해보도록 하겠습니다.

var, const, let과 호이스팅

console.log(Var); // undefined
console.log(Let); // ReferenceError: Let is not defined
var Var = 1;
let Let = 2;

TDZ를 소개하기 전, 잠깐 호이스팅의 개념을 되짚어보는 시간을 갖겠습니다.

초기화되지 않은 변수에 접근하려 하면 var 변수는 undefined를 출력하고 넘어가지만, letconst를 사용하는 변수는 ReferenceError를 출력하게 됩니다.

 

아마 "let과 const 키워드는 호이스팅이 이루어지지 않기 때문에" 라고 생각하시는 분들도 많겠지만, 사실 letconst 키워드 모두 호이스팅이 이루어지고 있습니다.

🚨 TDZ(Temporal Dead Zone)란?

TDZ는 선언되기 이전에 사용된 let, const, class 키워드 변수가 상주하는 영역입니다.

(※ 변수의 선언은 const a; 처럼 변수를 사용하기 위해 메모리를 할당하는 행위를 의미합니다.)

 

그리고 TDZ에 존재하는(선언되기 이전의) 변수에 접근하면 참조 오류를 출력해 호이스팅이 일어나지 않는 것처럼 보이는 것이죠.

console.log(Var); // Var 변수는 TDZ의 영향을 받지 않는다.

console.log(Let); // = Let 변수는 선언되기 이전이므로 TDZ 상에 존재한다.
                  // => TDZ에 존재하는 변수에 접근했으므로 오류를 출력한다.
var Var = 1;
let Let = 2;

다만, 호이스팅은 분명히 일어납니다.

let name = '찬민';
(function() {
  console.log(name); // Uncaught ReferenceError: Cannot access 'name' before initialization
  // name은 호이스팅된 "윤서" 변수로, 아직 선언되기 이전입니다.
  // 따라서 name 변수는 TDZ 영역에 존재하므로 오류를 출력합니다.
  let name = '윤서';
}());

만약 호이스팅이 일어나지 않았다면 함수는 "찬민" 을 출력하고 내부에서 let name = "윤서" 가 새로 정의될 것입니다.

그러나 위 코드는 오류를 출력함으로써 let name = "윤서" 가 호이스팅되었으나 선언 이전에 접근하고 있었음을 알 수 있습니다.

📝 결론

"변수가 선언되기 전에는 접근할 수 없다."

다른 변수에는 너무도 당연한 말이지만, 자바스크립트에서는 변수 호이스팅으로 인해 실행 결과를 예측할 수 없는 경우가 종종 생깁니다.

이러한 문제를 해결하기 위해 등장한 const, let 뒤에는 TDZ라는 보이지 않는 원리가 존재함을 꼭 기억하시면 좋을 것 같습니다. 😁

함께 읽어보면 좋을 글들

 

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라 | TOAST UI :: Make Your Web Delicious!

간단한 질문을 하나 하겠다. 아래 코드 스니펫에서 에러가 발생할까? 두 번째 코드는 함수를 실행한 다음 함수를 선언한다. 정답은 다음과 같다. 첫 번째 코드에서는 ReferenceError 에러가 발생하고

ui.toast.com

 

What is the temporal dead zone?

I've heard that accessing let and const values before they are initialized can cause a ReferenceError because of something called the temporal dead zone. What is the temporal dead zone, how does it

stackoverflow.com

 

TDZ(Temporal Dead Zone)이란?

함께보면 좋은 글 2020/07/05 - [프로그래밍 언어/Javascript] - 자바스크립트 호이스팅(Hoisting)이란? 오늘은 TDZ(Temporal Dead Zone)에 대해서 알아보도록 하겠습니다. 이번 포스팅은 자바스크립트의 호이스.

noogoonaa.tistory.com

 

반응형
Comments
소소한 팁 : 광고를 눌러주시면, 제가 뮤지컬을 마음껏 보러다닐 수 있어요!
와!! 바로 눌러야겠네요! 😆