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

토스트 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를 출력하고 넘어가지만, let과 const를 사용하는 변수는 ReferenceError를 출력하게 됩니다.

 

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

🚨 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!

What is the temporal dead zone?

TDZ(Temporal Dead Zone)이란?