Hoisting과 TDZ 대하여

정말 많이 들어봤던 호이스팅!

이 호이스팅은 어떤 역할을 하고 또 무엇일까요?

..저도 몰라서 찾아봤습니다.

 

MDN에는 이렇게 적혀있습니다.

 

호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.

반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

참고: 호이스팅은 (let과 const를 포함한) ECMAScript® 2015 언어 명세 이전의 표준 명세에는 나타나지 않았습니다. 당시에는 호이스팅이 JavaScript에서 실행 맥락, 특히 생성 및 실행 단계의 동작 방식을 설명하는 일반적인 방법이었습니다.

 

출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting

 

MDN에서 너무 잘 설명이 되어있어서 추가 설명이 필요없을 것 같네요..?

위 출처 링크를 누르시면 예제까지 추가되어 아주 잘 설명이 되어있으니 꼭 참고하시길 바랍니다.

 

 

TDZ(Temporal Dead Zone, 일시적 사각지대)

TDZ란 일시적인 사각지대로 변수를 사용하는 것을 비허용하는 개념상의 공간

이라고 합니다.

 

호이스팅과 굉장히 밀접한 관련이 있는 것 같아 호이스팅 설명 시 함께 설명하면 좋을 것 같습니다만

저 개념만으로는 무슨말인지 이해가 잘 되지 않습니다.

 

그래서 제가 호이스팅을 공부하기 위해 봤던 유튜브 영상이 있는데 12분짜리 영상으로

호이스팅과 TDZ에 대해 쉽게 설명해주더라구요.

이걸 보고 호이스팅과 TDZ에 대해 완벽히 이해할 수 있게 되었습니다.

이 글을 보는 다른분들도 호이스팅이 이해가 되지 않는다면 이 영상을 보시길 추천드립니다.

https://youtu.be/fETYLCU2YYc

 

위 영상에서는 TDZ를 이렇게 설명하고 있습니다.

let도 호이스팅이 되는데 let은 TDZ라는 개념을 만들었다고 합니다.

console.log(a)
let a = 1
console.log(a)

이런 코드가 있는데, a가 호이스팅으로 현재 기억된 상태입니다.

하지만 a선언문이 나오기 전까지는 a에 접근할 수 없습니다. 일시적으로 죽은 Zone입니다.

라는걸 만들어줬다고 합니다.

그래서 위 코드를 실행하면 아래와 같은 에러가 나옵니다.

Cannot access 'a' befor initialization

우리는 TDZ이기 때문에 a에 접근할 수 없어! 라고 하는 에러입니다.

 

좀 어렵게 풀어놨는데 정리하자면

a가 선언된 라인 전 까지는 a를 쓸 수 없습니다. 왜냐하면 그곳은 TDZ이기 때문입니다.

 

 

 

이렇게 Hoisting과 TDZ에 대해 알아보았습니다.

배우기 전에는 이게 뭐지? 했는데, 막상 배우고 나니 쉬운 개념이였습니다.

모든 CS가 이렇게 쉬웠으면 좋겠지만 ㅎㅎ...