Lee Joo Ho

이 부분, 강의에서 설명하신 거 같아서, 제가 답변 남겨봅니다. 마침 제가 딱 그 강의를 봐서요.
강의에서 let/const 는 호이스팅이 안된다라고 말하셨는데 MDN문서에는 된다라고 써있어서 헷갈리시는 거 같아요.&nbsp; 그래서 제가 MDN 문서도 읽고 좀 테스트 한 내용을 기반으로 설명해보겠습니다. :) ~~~ <span style="color: #1b1b1b; font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-sans; font-size: 16px; background-color: #ffffff;">Variables declared with&nbsp;<code style="box-sizing: border-box; border-radius: var(--elem-radius); font-size: 16px; padding: 0.125rem 0.25rem; width: fit-content; color: #1b1b1b;">let</code><span style="color: #1b1b1b; font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-sans; font-size: 16px; background-color: #ffffff;">&nbsp;and&nbsp;<code style="box-sizing: border-box; border-radius: var(--elem-radius); font-size: 16px; padding: 0.125rem 0.25rem; width: fit-content; color: #1b1b1b;">const</code><span style="color: #1b1b1b; font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-sans; font-size: 16px; background-color: #ffffff;">&nbsp;are also hoisted but, unlike&nbsp;<code style="box-sizing: border-box; border-radius: var(--elem-radius); font-size: 16px; padding: 0.125rem 0.25rem; width: fit-content; color: #1b1b1b;">var</code><span style="color: #1b1b1b; font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-sans; font-size: 16px; background-color: #ffffff;">, are not initialized with a default value. ~~~
우선 Hoisting 이란,&nbsp; 자바스크립트 엔진이 전체 소스를 미리 훓어서 변수 또는 function을 미리 찾아내어 미리 등록하는 하는 것이고, 이로 인한 장점은 소스 순서에 상관없이 해당 변수를 호출하는 곳에서 에러가 나지 않게 하는 것입니다.&nbsp;
그런데 자바스크립트는 변수&nbsp; 선언만 호이스팅 하지, 초기화하지 않는 점이 중요한거 같습니다. var 같은 경우는 최초에 자바스크립트 엔진에 의해 변수들을 선언하고, 실행될때까지 초기화되지 않는다면 undefined로 최기화합니다.
let/const 변수는 다 비슷한데,&nbsp; 초기화하기 전까지는 변수 Read가 불가능합니다. &nbsp;즉 자바스크립트엔진이 미리 해당 변수에 대해 알고 있기는 하지만, 읽을 수가 없는 거죠. 따라서 접근이 불가능한 변수를 호출하게되면,&nbsp; 당연히 에러가 발생하게 되는 겁니다. 여기에서 사용되는 용어가 바로&nbsp; Temporal Dead Zone(TDZ) 인거구요.
말 그대로, 변수가 일시적으로 아무런 역할을 할수 없게 되는 그런 구간이라는 거예요. 이로인해서 TDZ 구간에서는 let/var가 호이스팅이 되지 않는 거라고 볼수 있습니다.
좀 더 정확하게 TDZ 는 scope가 시작되는 {}블럭부터 let/const가 초기화되는 곳까지를 말하고, 호이스팅이 안되는 TDZ는 소스상의 순서가 아니라, 실행의 순서로 정해지는 겁니다. 이게 이해하기 좀 복잡한데, 이 예를 보면 좀 쉽게 이해할수 있습니다.
{
&nbsp; &nbsp; // TDZ starts at beginning of scope
&nbsp; &nbsp; const func = () => console.log(letVar); // OK
&nbsp; &nbsp; // Within the TDZ letVar access throws `ReferenceError`
&nbsp; &nbsp; let letVar = 3; // End of TDZ (for letVar)
&nbsp; &nbsp; func(); // Called outside TDZ!
}
위 예제에서, 첫번째 const에서 func() 는 letVar 변수를 이용하는데도 불구하고 에러가 안나는데 그 이유가 TDZ 외부에서 이 func을 호출했기 때문입니다. 만약에 let levVar=3; 이전에 console.log(letVar)를 호출했다면, 에러가 발생했을겁니다. TDZ 구간이였으니깐요.
이렇게 TDZ구간을 벗어나서 호출을하게 되면 let/const도 호이스팅이 되는 거라고 볼수 있습니다.&nbsp;
강의에서는 이것을 좀 더 구분지어서 global 변수와 지역변수(block)일때 어떤 현상이 나타나는지도 알려주셨는대요.&nbsp; Global변수일때는 아예 변수자체가 등록자체가 안되는 것을 볼수 있는데, 지역변수일때는 {}블럭이 시작될때 해당 변수가 Block 안에 undefined로 등록되는 것을 알수 있습니다. 그렇지만 이렇게 undefined로 보인다하더라도, 이를 TDZ 안에서 호출을 하면 에러가 발생되게 됩니다.&nbsp;
이외에도 TDZ로 인해서 에러가 발생하는 경우가 몇가지 더 나오는데요. 그것은 여기서 더 보시면 좋을거 같아요
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz
예제가 잘 나와있어서 이해하기가 괜찮았습니다.&nbsp;
조금이나마 도움이 되셨길 바래요. :)

Lee Joo Ho

Posts