JS의 호이스팅 발생 이유

이전에 호이스팅에 대해 두 번이나 정리한 적이 있지만, 호이스팅이 왜 발생하는지에 대해 다시 정리하고자 이 글을 통해 정리한다.

호이스팅

JS에서의 호이스팅이란 변수 선언과 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 의미한다.

console.log(x); // undefined
console.log(y); // ReferenceError: Cannot access 'constance' before initialization
console.log(z); // ReferenceError: Cannot access 'variable' before initialization

var x = 5;
const y = 0;
let z = 20;

console.log(x); // 5
console.log(y); // 0
console.log(z); // 20

 

위의 코드에서는 var 키워드로 선언한 x 변수는 undefined로, 나머지 let과 const로 선언한 y 와 z는 레퍼런스 에러가 발생했다.

 

학생들을 가르키며 JS를 배우는 학생들에게 호이스팅에 대해 수업을 진행할 때, 많은 학생들이 var 키워드만 호이스팅되고 const와 let은 호이스팅이 되지 않아 에러가 발생한다고 생각한다.

 

사실 const와 let 키워드, 함수 선언문 또한 호이스팅이 되는데, 이는 다음 글에 정리되어 있으니 참고하자.

호이스팅

 

 

호이스팅의 발생 이유

호이스팅이 발생하는 이유를 알기위해 먼저 JS엔진에서 변수를 생성하는 단계에 대해 알아야 한다.

 

JS 엔진에서 변수는 선언 → 초기화 → 할당 단계를 거치며 생성된다.

선언 단계 : 변수를 스코프(해당 실행 컨텍스트의 변수 객체)에 등록한다. 자세한 내용은 정리글을 통해 확인하자

초기화 단계 : 변수를 위한 메모리 공간 확보 및 undefined로 초기화되며 메모리가 할당되면 메모리 참조로 변수에 접근 가능

할당 단계 : 사용자가 정의한 값을 변수에 할당한다.

 

JS 엔진은 코드를 실행하기 전에 모든 스코프를 탐색하며 스코프 내의 변수 및 함수 정보를 수집하며, 특정 함수가 실행될 때 선언한 변수 및 함수 정보를 알고 있기 때문에 호이스팅이 발생하는 것이다.