호이스팅(Hoisting)

2022-02-28 · 2 min read

요약

호이스팅이란 JavaScript의 특징으로, 함수나 변수의 선언을 코드의 최상단으로 끌어올린 것처럼 동작하는 방식을 말합니다.

호이스팅은 JavaScript가 함수 단위 스코프를 따르는 언어이기 때문에 발생합니다. 한 함수 내에서 함수나 변수는 함수 전체에 걸쳐 정의되기 때문에, 필연적으로 함수 최상단에서 선언된 것과 같은 동작을 합니다.

JavaScript의 함수 단위 스코프와 호이스팅

과거(ES6 이전) JavaScript의 특징 중 하나는 함수 단위 스코프를 갖는다는 것이었습니다. 블록 단위 스코프를 갖는 타 언어와 달리 JavaScript는 함수 내의 모든 변수는 함수 전체에 걸쳐 정의됩니다.

function test(num) {
  if (num > 5) {
    var i = 10;
  }

  console.log(i); // 이 i는 if문 안에서 선언된 i와 같다!
}

test(3); // undefined (if문에 진입하지 않았으므로 i는 10으로 초기화되지 않음)
test(7); // 10 (i는 if문에 들어가 10으로 초기화됨)

위 예시에서 에러가 아닌 undefined가 출력되는 것을 확인할 수 있습니다. 즉 실제 선언부까지 가지 않더라도, 함수에 진입한 시점에서 이미 i는 선언된 상태와 같습니다.

마치 변수의 선언부와 초기화를 따로 떼어내고 선언부를 스코프 맨 위로 끌어올린 것처럼 동작한다고 해서 이를 호이스팅(hoisting, 끌어올림) 이라고 합니다.

// 위 함수는 마치 아래처럼 동작한다.
// 실제로 코드가 이런 식으로 변환되는 것은 아니고
// 메모리 상에서 이처럼 동작한다는 뜻!
function test(num) {
  var i; // i의 선언부
  if (num > 5) {
    i = 10; // i 초기화
  }

  console.log(i);
}

MDN에서는 호이스팅을 아래와 같이 정의하고 있습니다.

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

호이스팅의 특징

var

var로 선언한 변수는 호이스팅되어 undefined로 초기화됩니다. 따라서 초기화 전에 사용해도 오류는 발생하지 않습니다.

let과 const

let, const로 선언한 변수와 상수는 호이스팅이 되지 않는다고 알려져 있기도 합니다. 엄밀히 말하자면 호이스팅은 일어나지만(즉 메모리 상에 공간은 할당되지만) 값이 초기화되지 않습니다. 이를 변수의 일시적 사각지대(Temporal Dead Zone, TDZ) 라고 하며, 어떤 식으로든 사용하려 하면 ReferenceError가 발생합니다.

초기화는 호이스팅되지 않는다

끌어올려지는 것은 선언(Declare) 뿐이고 초기화(Initialize)는 끌어올려지지 않습니다. 따라서 var로 선언한 변수를 정의한 위치보다 앞에서 사용할 수 있다 해도, 단지 오류만 나지 않을 뿐이지 초기화 전까지는 그 값을 사용할 수 없습니다.

함수 선언은 호이스팅된다

함수 선언은 호이스팅되며 정의된 위치보다 앞에서 자유롭게 사용할 수 있습니다.

print_hello(); // hello world!

function print_hello() {
  console.log('hello world!');
}

함수 표현식은 호이스팅되지 않는다

표현식으로 정의된 함수는 자신이 할당된 변수를 통해 참조됩니다. 그리고 변수의 초기화는 호이스팅되지 않으므로 함수 표현식 역시 자신이 정의된 위치 이전에는 사용할 수 없습니다.

호이스팅의 쓰임새

함수 선언의 호이스팅은 함수를 정의한 순서에 상관 없이 사용할 수 있다는 점에서 유용하게 사용할 수 있습니다.

단 변수의 호이스팅은 잠재적인 버그의 원인이 됩니다. 과거에는 예상치 못한 동작을 예방하기 위해 함수에서 사용하는 모든 변수를 함수 시작 부분에 선언하는 등의 컨벤션이 존재하기도 했습니다. 현재는 블록 단위 스코프를 따르는 let과 const가 있으므로 var 키워드 및 변수의 호이스팅은 일반적으로 더 이상 사용되지 않습니다.

참고 자료

호이스팅 - 용어 사전 | MDN (mozilla.org)
JavaScript Hoisting (w3schools.com)
javascript - Is there any benefit from hoisting? - Stack Overflow
데이비드 플래너건, 『자바스크립트 완벽 가이드(6판)』