[JavaScript] Hoisting과 Temporal Dead Zone

Temporal Dead Zone

Temporal Dead Zone(TDZ)은 변수에 접근할 수 없는 블록 영역으로 컴퓨터가 변수를 어떤 값으로 아직 초기화 하지 않은 영역이다. TDZ에서 변수에 접근하면 Reference Error가 발생하게 된다.

Hoisting

Hoisting은 '끌어 올리기'라는 뜻을 가진 단어로, JavaScript에서 특정 방법으로 선언된 변수는 선언 전에 메모리에 할당되고 undefined로 초기화되는 것을 의미한다.

JavaScript에서는 아래 3가지 상황에서 호이스팅이 발생한다.

1. var 키워드로 변수를 선언
2. 함수 선언식으로 함수를 선언
3. import 구문 사용

첫 번째와 두 번째 상황에서 호이스팅으로 인해 코드가 예상치 못한 방법으로 동작할 수 있어서 이를 피하기 위해 다음과 같은 방법을 사용한다.

1. let 또는 const 키워드로 변수를 선언
2. 함수 표현식으로 함수를 선언

이 경우 호이스팅이 발생하지 않는다. 즉, 선언 전에 메모리에 미리 할당하지 않고, undefined로 초기화 되지 않는다.

Hoisting과 Temporal Dead Zone

호이스팅을 피하기 위해 Temproal Dead Zone이 생겨났다. 호이스팅이 일어나면 선언식 이전에 변수나 함수에 접근 시 undefined라는 값을 가지고 있어서 에러가 발생하지는 않지만, 호이스팅이 일어났을 때는 Reference Error가 발생하게 된다.

이미지 출처: https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/

참고문헌

• https://www.freecodecamp.org/news/javascript-temporal-dead-zone-and-hoisting-explained/
• https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/