[JavaScript] 호이스팅(Hoisting)이란?

호이스팅(Hoisting)

인터프리터가 코드를 실행하기 전에, 변수/함수 선언부가 스코프의 맨 위로 올라가는 것 같은 현상을 말한다.

• 메모리를 선점하여 stack영역 세팅 → 실행이 빨라짐
• js는 코드가 실행되기 전에 평가 과정을 거치는데, 이 때 호이스팅이 진행된다.
• 전역 코드 평가 -> 전역 코드 실행 -> 함수 코드 평가 -> 함수 코드 실행 -> 복귀

JS의 변수 선언 단계

1. 선언
   a = <NotInitializedYet>
   변수를 실행컨텍스트의 변수 영역에 저장한다.
2. 초기화
   a = undefined
   변수를 위한 공간을 메모리에 확보한다.
3. 할당
   a = 100
   확보된 메모리에 실제 값을 저장한다.

• var은 선언과 동시에 초기화가 이루어져, undefined상태가 된다.
• let, const은 선언만 되기 때문에, notInitializedYet상태로 호이스팅 된다. (TDZ에 들어간다)

TDZ

Temporal Dead Zone(일시적 사각지대)
변수가 선언만 되고 초기화되지 않아 접근시에 오류가 발생하는 범위. 오류가 발생하는 스코프의 시작 지점부터 초기화 지점까지을 일컬어 TDZ라고 한다.

//<text호이스팅 위치>
console.log(text); // 호이스팅 때문에 선언이 끌어올려져서 오류x
text = 'Hoisting'; 
var text;

console.log(text); // 오류 발생
let text = 'Hoisting'; 

호이스팅 범위

• var, function 함수 스코프 → 함수를 만날 때까지 올라감.
• let, const는 블록 스코프
• 프로젝트 가장 바깥에, 보이지 않는 함수가 있다
  → var은 호이스팅 될 때, 가장 겉까지 올라간다!
• 호이스팅 될 때 위로 올라갔는데, 동일한 이름이 있으면 무시된다.
• 변수의 호이스팅이 함수보다 위에 된다.