Hoisting(호이스팅)과 TDZ(temporal dead zone)에 관하여

danmin20·2021년 2월 21일
0

Javascript

목록 보기
4/9

호이스팅

호이스팅이란 코드에 선언된 변수 및 함수가 코드 상단으로 끌어올려지는 것처럼 동작하는 것을 말한다.
함수 스코프의 변수는 해당 함수의 최상단으로, 전역 스코프의 변수는 스크립트 단위의 최상단으로 끌어올려진다.
자바스크립트 파서가 내부적으로 끌어올려서 처리하는 것으로, 실제 메모리에서는 변화가 없다.

인터프리터 언어인데 어떻게?

자바스크립트는 인터프리터 언어로 한줄 씩 실행되어야 하는데, 어떻게 호이스팅이 일어나는 것일까?
바로 전처리 과정을 거칠 때 호이스팅이 일어나기 때문이다.
자바스크립트 프로그램을 실행시키면 약간의 전처리 과정이 일어나는데, 이를 스캐닝이라고 하며, 스캐닝 과정이 끝난 후 런타임 때 다시 위에서부터 한 줄씩 실행된다.

TDZ

var로 선언된 변수의 경우, 선언 전에 접근하여도 잘 작동한다. 호이스팅이 일어난다는 것을 확실히 볼 수 있다.
그렇다면 let과 const의 경우는? 선언 전에 접근하면 레퍼런스 에러가 발생한다. 호이스팅이 일어나지 않는 것일까?

let과 const 또한 호이스팅이 일어난다. 에러가 발생하는 것은 바로 TDZ, temporal dead zone 때문이다. TDZ는 선언문이 존재하는 스코프 범위 내에서 존재하는데, TDZ 안에 있는 변수에 접근하게 되면 레퍼런스 에러가 발생하게 된다.
let과 const의 경우, 선언 전 줄까지 TDZ의 영향을 받기 때문에 선언 전에 접근하게 되면 에러가 발생하게 되는 것이다. (const는 당연히 선언 및 초기화 전 줄 까지)
TDZ는 let, const, class, constructor 내부의 super, 기본 매개변수에 대해 적용된다.

var과 함수 선언은 TDZ의 영향을 받지 않으므로, 호이스팅되어 undefined로 초기값이 할당되기 때문에 선언 전에 접근하여도 에러가 발생하지 않는다. import 구문 또한 TDZ의 영향을 받지 않으며 호이스팅된다.

profile
FE developer 😉

0개의 댓글