호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당함수의 유효범위의 최상단에 선언하는 것을 말한다.
- 코드가 실제로 실행되기전 Parser 라는 도구(도구라고하는게 맞는지 모르겠다) 가 함수안에 필요한 변수 값들을 모두모아서 유효범위의 최상단에 선언한다
- 유효범위 : 함수의 영역을 나타내는 {} 범위
다시말하면, 함수 내에서 아래쪽에 존재하는 내용들 중 필요한 값들을 최상단으로 끌어 올려서 미리 선언해놓는 것을 말한다.
실제로 라인자체가 끌어 올려지는 것은 아니지만, 자바스크립트 함수 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서도 변화가 없다.
일단 자바스크립트의 모든 선언에서 호이스팅이 일어나지만, let, const, class를 이용한 선언문들은 호이스팅이 발생하지 않은 것처럼 동작한다.
중요한 점은 이 호이스팅이라는 용어가 ‘선언이 먼저 메모리에 저장되었다.’는 것을 의미하기 때문에 즉, ‘선언이 끌어올려진다’는 의미이기 때문에 모든 선언은 호이스팅이 일어난다는 말은 참이된다.
즉, 호이스팅이 파일의 맨 위로 끌어올려진 것 같은 현상을 의미할 때 선언문 이전에 참조해서 에러를 발생시킨다고 호이스팅이 일어나지 않은 것은 아니라는 의미이다.
왜냐하면 정말 선언은 끌어올려진 것이 맞다. (표현하면 그렇고 정확히는 선언이 코드 실행 전에 메모리에 저장되었다는 의미이다.)
그런데 왜 오류가 나는가 하면 var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 저장되는데 let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장되기 때문이다.
초기화 되지 않으면 변수를 참조할 수 없다. 그래서 참조 에러를 일으키는 것이다.
let과 const에도 호이스팅이 일어나기 때문에 에러를 일으키는 것이다.
- var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화한다. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이후 변수 할당문에 도달하면 비로소 값이 할당된다.
이러한 var의 문제를 해결하기위해 let 이라는 변수선언 이 2015년 ES6의 개정 때 만들어졌다.
