JS Hoisting

Hoist: 소형의 감아올리는 장치. 공장 내의 재료 운반·조립에 사용하며, 들보 위에서 이동시킴. 구동 방식에 따라 공기 호이스트·전기 호이스트 등으로 나누어짐.

정의 출처: Oxford Languages

호이스팅(Hoisting)

자바스크립트는 코드가 실행되기 전 자바스크립트 엔진이 선언된 변수와 함수를 가져가서 메모리에 기억을 해두는 특성이 있다.

따라서 호이스팅은 보통 코드를 실행하기 전 함수의 선언과 변수의 선언을 파일의 맨 위로 끌어올리는 것처럼 보여지지만 그렇지 않다.

JS엔진이 스크립트를 가져오면 가장 먼저 코드에서 데이터를 위한 메모리를 설정하기 때문에 이 준비단계를 마치고 코드를 실행한다.

이 때 함수와 변수가 메모리에 저장되는 방식은 다른데

• 함수는 전체 함수에 대한 참조와 함께 저장된다.
• 변수의 경우 ES6 문법인 let과 const는 초기화 되지 않은 채로 저장이 되고, var는 undefined로 저장이 된다.

console.log(a) //오류가 아닌 undefined가 콘솔에 출력됨.
var a = 1

TDZ(Temporal Dead Zone)

console.log(a) //ReferencaError: Cannot access 'a' before initialization
let a = 1
console.log(a)

스코프 시작 지점에서 초기화 시작 지점까지를 TDZ라고 한다.

즉, 호이스팅이 되지 않는 것이 아닌 호이스팅은 되었으나 메모리가 할당되지 않아 접근할 수 없는 것.

변수의 생성 단계

1. 선언 단계(Declaration Phase)
   • 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계.
   • 이 변수 객체는 스코프가 참고하는 대상이 된다.
2. 초기화 단계(Initialization Phase)
   • 실행 컨텍스트에 존재하는 변수 객체에 선언 단계에서 생성된 변수를 위한 메모리를 만드는 단계.
   • 이 단계에서 할당된 메모리에 undefined를 할당한다.
3. 할당 단계(Assignment Phase)
   • 초기화 단계에서 undefined로 초기화된 메모리에 다른 값을 할당하는 단계이다.