소주제

Hoisting, Temporal Dead Zone

노트

• Hoisting : 인터프리터(프로그래밍 언어의 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우, 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화하지 않는다.
• Temporal Dead Zone(시간상 사각지대): let 변수는 초기화하기 전에는 읽거나 쓸 수 없다(선언 구문에 초기 값을 지정하지 않는 경우, undefined로 초기화 한다.). 초기화 전에 접근을 시도하면 ReferenceError가 발생한다. 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 “시간상 사각지대(TDZ)”에 들어간 변수라고 표현한다. ‘시간상’ 사각지대인 이유는, 코드 실행 순서(시간)에 의해 사각지대가 형성되기 때문이다.

단문 요약

<aside> 📌 호이스팅은 변수 또는 함수의 선언 전에 메모리 공간을 미리 할당하는 것을 의미한다. 이로 인해 해당 변수 또는 함수를 사용하는 코드가 선언보다 먼저 작성될 수 있다. 단 let, const 변수는 변수의 초기화 이전에 접근을 시도하면 참조에러를 반환한다. 이는 선언단계와 초기화 단계 사이에 TDZ(시간상(일시적) 사각지대)가 생김으로써 참조에러가 발생한다. TDZ에 영향을 받는 키워드로는 let, const, class가 있다. 반대로 TDZ에 영향을 받지 않는 키워드로는 var, fuction, import가 있다.

</aside>

Reference

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

인터프리터

TDZ(Temporal Dead Zone)이란?

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

호이스팅과 TDZ는 무엇이고 어떤 연관이 있을까요?