호이스팅이란?
함수나 변수의 선언이 위로 끌어올려져서 동작하는 것.
자바스크립트에서는 변수 선언부터 할당까지 총 세 단계로 진행된다.
그리고 자바스크립트에서 모든 함수나 변수의 선언은 호이스팅이 발생한다.
console.log(a);
var a;
// output: undefined위의 예시가 가장 대표적인 호이스팅 발생의 예라고 볼 수 있겠다. a라는 변수를 참조한 후에 선언해도 호이스팅에 의해 선언이 위로 끌어올려지고 var 특성상 선언 직후 바로 초기화가 이루어지면서 결과는 undefined이다.
이건 자바스크립트에서 일어나면 안되는 일 중 하나이다. 자바스크립트에서 코드는 위에서부터 아래로 실행되는데 변수 선언 전에 참조한 값이 비록 undefined 일지라도 에러가 뜨지 않고 반환이 된다면, 어디서 잘못 되었는지 찾기 쉽지 않고 코드를 계속 실행시키기 때문에 예기치 못한 오류를 유발하기 쉽다.
var를 사용한 변수 선언이나 함수 선언식을 사용할 때 이런 현상이 발생하기 때문에 var 사용 또는 함수 선언식 사용은 지양해야 한다.
게다가 얼마전까지만 해도 var를 사용한 변수 선언과 함수 선언식은 중복 선언 또한 가능했었다...!!
그럼 어떻게 해야하는가
let과 const를 사용하면 이러한 현상을 방지할 수 있다. let과 const를 사용한 변수 선언도 마찬가지로 선언 단계에서 호이스팅이 발생하지만 초기화 단계를 거치기 전에 TDZ(Temporal Dead Zone)에 들어가게 되고 이는 선언 전 참조를 했을 때 참조 에러를 유발하게 한다.
함수 선언식 같은 경우는 함수 표현식을 사용해서 let과 const를 사용한 변수 선언에 함수를 할당해주면 똑같은 원리로 해결이 된다.
