[JavaScript] 호이스팅(Hoisting)

호이스팅(Hoisting)이란, 자바스크립트 엔진이 코드가 실행되기 전에 함수, 변수, 객체 등의 선언들을 해당하는 범위(scope)의 최상단으로 끌어올리는 것처럼 보이는 과정을 의미합니다. 자바스크립트 엔진이 코드를 실행하기 전에, 실행 가능한 코드를 구분하는 하면서 필요한 메모리 공간을 미리 할당하기 위해서 호이스팅이 발생하게 되는 것입니다. 

 

var 키워드를 사용한 선언에서 호이스팅이 뚜렷하게 나타나는 것을 확인할 수 있습니다. 선언이 되기 전에 var 변수를 참조하면 참조 오류(Reference Error)가 발생하지 않고, undefined를 값으로 가지는 것을 확인할 수 있습니다. 선언문은 범위의 최상단으로 끌어올려져 있지만, 값은 자동으로 undefined로 초기화된 상태이기 때문입니다. 

console.log(num); // value of num is undefined
var num; // Declare
num = 6; // Assign

 

let 키워드와 const 키워드를 사용한 선언에서는 호이스팅이 다른 방식으로 나타나게 됩니다. 두 키워드는 블록 레벨 스코프를 가지고 있기 때문에, 호이스팅이 발생하는 범위가 코드 블록으로 제한받게 됩니다. 이는 다음과 같은 코드에서 오류를 발생시키도록 만듭니다.

const x = 1;
{
  console.log(x); // Reference Error
  const x = 2;
}

만약 const x = 2;에 해당하는 선언문이 호이스팅 되지 않았다면, x 값은 그대로 1을 반환하게 됩니다. 하지만 범위 내에서 호이스팅 되었고, const 변수는 호이스팅이 되었을 때 값이 초기화되지 않기 때문에 참조 오류가 발생하게 됩니다. 

나타나는 방식이 미묘하기 때문에 호이스팅이 일어나지 않는다고 오해하기가 쉽지만, 이와 같이 호이스팅이 var, let, const 세가지 키워드에 공통적으로 발생한다는 것을 알 수 있습니다.