[Javascript] Hoisting과 TDZ

Javascript는 var, let, const와 같은 변수 생성 방법이 존재한다.

우리는 간혹 Hoisting을 생각할 때 var과 함수는 Hoisting 되지만

let과 const는 호이스팅이 되지 않는다고 생각한다.

그러나, 이는 틀린 말이다.

 

---

먼저 Hoisting의 정의에 대해 알아보자.

Hoisting은 MDN 문서에 따르면

인터프리터가 변수와 함수의 메모리 공간을

선언 전에 미리 할당하는 것을 의미한다.

(🌸호이스팅의 ECMAScript 2015 언어 명세 이후 나타났습니다.)

 

여기서 var과 let의 차이가 하나 발생하게 되는데

바로 선언과 초기화의 차이이다.

우리는 javascript에 변수가 할당되는 곳까지 총 3개의 단계로 나누어 볼 수 있다.

 

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

이렇게 나누어진 3가지의 단계에서 var의 경우 1-2가 함께 실행된다.

즉, Hoisting으로 메모리 공간을 먼저 할당하면서

변수를 undefined으로 초기화까지 진행한다는 의미이다.

그렇기 때문에 내가 만약 var 변수를 선언하기도 이전에 다음과 같이 사용했을 때는 문제가 발생하지 않는다.

 

tag → Hoisting으로 undefined var tag →  선언

그렇다면 동일하게 크롬의 console을 사용해

let의 변수를 선언하기 이전에 불러본 뒤

선언하면 undefined이 작동될까?

 

let을 사용할 경우 위와 같은 참조 오류가 발생하게 된다.

let은 Temporal Dead Zone이 존재한다.

TDZ는 시간상 사각지대 라는 뜻으로

스코프 시작 지점부터 해당 let 변수가 초기화 되는 시작 지점까지의 구간을 의미한다.

let의 변수 할당 단계에서 TDZ의 존재로 인해

메모리가 할당되지 않기에 참조 오류가 발생하고

이를 통해 간혹 Hoisting이 일어나지 않는다고 생각할 수 있다.

 

MDN을 살펴보면Hoisting에 대한 조금 더 자세한 정보를 알 수 있는데,

Hoisting이 일어나기 위해서는 var, let, const 혹은 함수가 필수로 필요하다.

다음과 같은 문제(MDN 발췌)를 끝으로 글을 마무리 하고자 한다.

 

x = 1; 
console.log(x + " " + y); // '1 undefined'
var y = 2; 

다음의 결과는 1 undefined 이다. 그렇다면 Hoisting 대상은?

답은 바로 y만이 호이스팅 대상이다.

x에는 별도의 선언이 없이 x =1로 초기화를 진행했기 때문이다.

 

이렇듯 javascript는 초기화를 제외한 선언만 호이스팅한다.

---

💜

 

해당 게시글은 MDN 공식 문서 및 Udemy 강의, 블로그를 참고하여 만들어졌습니다.

틀린 부분이 있다면 댓글 주시면 수정하겠습니다.

감사합니다 😊

 

참고 링크

1. https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 | MDN

2. https://velog.io/@faith/JavaScript-호이스팅과-TDZ는-무엇일까1

JavaScript 호이스팅과 TDZ는 무엇일까?(1)