LET/CONST는 호이스팅이 안된다?

내가 듣는 인프런 강좌에 질문이 올라왔길래 답변을 단 내용을 내 블로그에도 공유해본다. :)

 

강의에서 let/const 는 호이스팅이 안된다라고 말하셨는데 MDN문서에는 된다라고 써있어서 헷갈리시는 거 같아요.  그래서 제가 MDN 문서도 읽고 좀 테스트 한 내용을 기반으로 설명해보겠습니다. :)

Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value.

 

우선 Hoisting 이란,  자바스크립트 엔진이 전체 소스를 미리 훓어서 변수 또는 function을 미리 찾아내어 미리 등록하는 하는 것이고, 이로 인한 장점은 소스 순서에 상관없이 해당 변수를 호출하는 곳에서 에러가 나지 않게 하는 것입니다. 

그런데 자바스크립트는 변수  선언만 호이스팅 하지, 초기화하지 않는 점이 중요한거 같습니다. var 같은 경우는 최초에 자바스크립트 엔진에 의해 변수들을 선언하고, 실행될때까지 초기화되지 않는다면 undefined로 최기화합니다.

let/const 변수는 다 비슷한데,  초기화하기 전까지는 변수 Read가 불가능합니다.  즉 자바스크립트엔진이 미리 해당 변수에 대해 알고 있기는 하지만, 읽을 수가 없는 거죠. 따라서 접근이 불가능한 변수를 호출하게되면,  당연히 에러가 발생하게 되는 겁니다. 여기에서 사용되는 용어가 바로  Temporal Dead Zone(TDZ) 인거구요.

말 그대로, 변수가 일시적으로 아무런 역할을 할수 없게 되는 그런 구간이라는 거예요. 이로인해서 TDZ 구간에서는 let/var가 호이스팅이 되지 않는 거라고 볼수 있습니다.

좀 더 정확하게 TDZ 는 scope가 시작되는 {}블럭부터 let/const가 초기화되는 곳까지를 말하고, 호이스팅이 안되는 TDZ는 소스상의 순서가 아니라, 실행의 순서로 정해지는 겁니다. 이게 이해하기 좀 복잡한데, 이 예를 보면 좀 쉽게 이해할수 있습니다.

{
    // TDZ starts at beginning of scope
    const func = () => console.log(letVar); // OK

    // Within the TDZ letVar access throws `ReferenceError`
    let letVar = 3; // End of TDZ (for letVar)

    func(); // Called outside TDZ!
}

위 예제에서, 첫번째 const에서 func() 는 letVar 변수를 이용하는데도 불구하고 에러가 안나는데 그 이유가 TDZ 외부에서 이 func을 호출했기 때문입니다. 만약에 let levVar=3; 이전에 console.log(letVar)를 호출했다면, 에러가 발생했을겁니다. TDZ 구간이였으니깐요.

 

이렇게 TDZ구간을 벗어나서 호출을하게 되면 let/const도 호이스팅이 되는 거라고 볼수 있습니다. 

강의에서는 이것을 좀 더 구분지어서 global 변수와 지역변수(block)일때 어떤 현상이 나타나는지도 알려주셨는대요.  Global변수일때는 아예 변수자체가 등록자체가 안되는 것을 볼수 있는데, 지역변수일때는 {}블럭이 시작될때 해당 변수가 Block 안에 undefined로 등록되는 것을 알수 있습니다. 그렇지만 이렇게 undefined로 보인다하더라도, 이를 TDZ 안에서 호출을 하면 에러가 발생되게 됩니다. 

 

이외에도 TDZ로 인해서 에러가 발생하는 경우가 몇가지 더 나오는데요. 그것은 여기서 더 보시면 좋을거 같아요

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz

예제가 잘 나와있어서 이해하기가 괜찮았습니다. 

조금이나마 도움이 되셨길 바래요. :)