자바스크립트 호이스팅 완벽 가이드: var, let, const, 함수 차이점 정리

호이스팅(Hoisting)

호이스팅(Hoisting)은 변수 선언과 함수 선언이 코드의 실행 시점에 "끌어올려지는" 현상을 의미합니다.

자바스크립트 코드가 실행되기 전에 변수와 함수의 선언이 최상단으로 이동하게 되며, 값 할당은 이동하지 않고 변수나 함수 선언만 이동합니다.

변수 호이스팅

자바스크립트에서 변수는 var, let, const 키워드를 사용하여 선언할 수 있으며, 호이스팅의 동작은 각 키워드에 따라 다릅니다.

var로 선언된 변수의 호이스팅

var로 선언된 변수는 선언이 호이스팅되어 최상단으로 이동하지만, 초기화(값 할당)는 이동하지 않습니다.

따라서 선언된 변수를 사용하기 전에 값이 할당되었는지에 따라 값이 undefined로 나타날 수 있습니다.

console.log(x); // undefined

var x = 5;

console.log(x); // 5

호이스팅 동작은 내부적으로 다음과 같이 변환됩니다.

var x;

console.log(x); // undefined

x = 5;

console.log(x); // 5

let, const로 선언된 변수의 호이스팅

let과 const로 선언된 변수 역시 호이스팅이 발생하지만, 초기화 전까지는 사용할 수 없습니다.

이 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 하며 초기화 전에 접근하면 ReferenceError가 발생합니다.

console.log(x); // ReferenceError: Cannot access 'x' before initialization

let x = 5;

함수 호이스팅

자바스크립트에서는 함수 선언도 호이스팅이 발생합니다. 함수 선언은 var와는 다르게 함수 선언 전체가 호이스팅됩니다.

함수 선언

console.log(foo()); // "Hello"

function foo() {
  return 'Hello';
}

호이스팅 동작은 내부적으로 다음과 같이 변환됩니다.

function foo() {
  return 'Hello';
}

console.log(foo()); // "Hello"

함수 표현식

그러나 함수 표현식은 호이스팅되지 않습니다. 함수 표현식은 변수에 함수를 할당하는 형태이므로, 변수의 호이스팅과 마찬가지로 선언만 호이스팅되고 초기화는 Temporal Dead Zone(TDZ)에 존재합니다.

console.log(foo()); // TypeError: foo is not a function

var foo = function () {
  return 'Hello';
};

요약

변수 선언

var는 호이스팅되어 최상단으로 올라가지만 값 할당은 원래 위치에 남고, let과 const는 호이스팅되지만 초기화 전에 접근하면 에러가 발생합니다.

함수 선언

함수 선언문은 선언과 정의가 함께 호이스팅되어 코드 어디서나 사용할 수 있습니다.

함수 표현식

함수 표현식은 변수 선언처럼 동작하며, 초기화가 이루어지기 전에 사용할 수 없습니다.