호이스팅이란?
함수 안에 필요한 선언(변수선언, 함수선언)들을 스코프 최상단으로 끌어올려지는 것 같은 자바스크립트 특성.
실제로 선언이 위로 끌려지는 게 아니라, 실행컨텍스트를 구성하는 과정에서 메모리에 선언이 undefined로 초기화 되어 저장되는 것.
함수 표현식은 호이스팅이 되지 않는다. 함수를 할당한 변수를 호이스팅할 뿐, 함수로 인식하지 않기 때문이다.
let과 const도 호이스팅이 된다.
TDZ로 인해 어휘적 바인딩이 되기전까지는 참조에러가 뜨며 액세스 할 수 없다.
undefined가 안뜨고 참조에러가 뜨는 것은 예측 가능하고 잠재적 버그를 쉽게 찾아 낼 수 있게 한다.
var 키워드는 선언 단계와 초기화 단계까지 거쳐 메모리에 저장 되는 반면
let 키워드는 선언 단계와 초기화 단계가 분리되어 있어서, 선언 단계는 거치지만, 초기화 단계는 변수 선언문에 도달 했을 때 이뤄진다.
즉, 메모리에 저장되어있는 변수에 초기화(할당)가 되어있지 않아서 참조에러가 나는 것.
스코프의 시작점부터 변수의 초기화 시작점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.
let foo = 1;
{
console.log(foo);
let foo = 2;
}선언이 호이스팅 되었기 때문에 블록스코프에서 찾을수 없다.
변수는 어떻게 생성되며, 호이스팅은 어떻게 이뤄질까?
1단계: 선언 단계(Declaration phase)
변수를 실행 컨텍스트의 변수 객체에 등록한다.
이 변수 객체는 스코프가 참조하는 대상이 된다.
2단계: 초기화 단계(Initialization phase)
변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
이 단계에서 변수는 undefined로 초기화 된다.
3단계: 할당 단계(Assignment phase)
undefined로 초기화된 변수에 실제 값을 할당한다.
참조: https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/
