호이스팅이란?

서론

JS를 사용하다보면 변수를 선언할때 var 와 let을 구분하여 사용하는 것을 알 수 있다.
겉으로 보기에 둘은 크게 차이가 없어보이는데 왜 따로 구현되어 있는 것일까?

var? let? const?

위의 의문을 해결하기 위해서는 var 와 let,const 의 차이에 대해서 알아야한다.

간단히 설명하자면 var 같은 경우 코드 위쪽에서 선언을 했더라도 아래에서 다시 선언문을 사용할 수 있다.
하지만 let 과 const는 한번 선언하면 같은 변수를 다시 선언할 수 없다.
또한 var 같은 경우 호이스팅이 발생하면 출력되지만, let과 const 같은 경우는 호이스팅이 발생할 경우 오류가 발생한다.

호이스팅?

여기서 말하는 호이스팅은 끌어올리다 라는 뜻의 hoist 로 부터 만들어진 언어이다.
아래에 선언된 변수라도 마치 위로 끌어올려진 것처럼 선언 전에도 인식 가능한 현상이다.
한가지 조심해야할 것은 실제로 코드 위로 끌어올려진 것이 아니라 끌어올려진 것처럼 '보이는' 것이다.

왜 발생하는가?

JS에서는 코드를 실행하기전 코드를 형상화하고 분리하는 작업을 하는데 이 때 선언된 변수를 따로 메모리에 저장한다.
그래서 코드에서 변수가 선언되기 전 그 변수를 사용하면 메모리에 저장된 변수를 인식해 동작하게 된다.
그렇기때문에 마치 코드 제일 상단으로 끌어올려진 것(hoisting)처럼 보이게 되는 것이다.

var vs let

이제 호이스팅이 무엇인지는 알겠다.
그렇다면 var와 let은 이 호이스팅이라는 현상에 대해서 어떻게 다른 것일까?

var 같은 경우는 위에서 설명한 것처럼 코드를 실행하면 변수를 선언하고 변수 메모리에 할당되게 된다.
하지만 let은 변수를 선언 후 TDZ(Temporal Dead Zone), 즉 일시적 사각지대에 빠지게 된다.

이렇게 되면 var는 선언과 메모리 할당을 실행고 동시에 하는 반면,
let은 코드를 실행할 때 변수가 선언되고 코드가 읽어지며 자신을 만나면 메모리에 할당되는 것이다.

이러한 차이때문에 let을 사용하면 메모리에 할당되지 않은 변수를 사용하지 못해 Reference Error 가 발생하게 되는 것이다.

마치며

코드를 작성할 때 변수 선언 위치는 기본적이고, 매우 중요한 것 중 하나이기때문에 조심하는 것이 좋다.
또한 var를 사용하기보다는 let을 사용하는 것이 코드를 안정적으로 짜는데 더 도움이 될 것이다.