자바스크립트 호이스팅 정리

🔍 호이스팅이란?

호이스팅(hoisting)은 자바스크립트에서 변수나 함수의 선언이 실행 전에 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 메커니즘이다.

정확히는, 자바스크립트 엔진이 실행 컨텍스트를 생성할 때 변수 및 함수의 선언을 먼저 메모리에 등록한 후, 코드가 실행된다.

 

🔄 어떤 코드가 호이스팅 되는가?

console.log(message); // undefined
var message = "Hello, world!";

위 코드는 undefined를 출력한다.

이는 var message; 선언이 먼저 끌어올려졌기 때문이다.

 

자바스크립트는 다음과 같이 처리한 것처럼 동작한다:

var message;
console.log(message); // undefined
message = "Hello, world!";

 

✅ 함수 선언문

greet(); // "Hi!"

function greet() {
  console.log("Hi!");
}

함수 선언문은 전체가 호이스팅되므로, 선언 이전에도 정상적으로 호출할 수 있다.

 

❌ 함수 표현식

sayHello(); // TypeError: sayHello is not a function

var sayHello = function () {
  console.log("Hello!");
};

함수 표현식의 경우 변수 선언만 호이스팅되고 함수는 런타임에 할당되므로,

호출 시점에 값이 undefined이며 TypeError가 발생한다.

 

자바스크립트는 다음과 같은 순서로 처리한다:

var sayHello;
sayHello();   // undefined인 상태에서 호출 시도 → TypeError

sayHello = function () {
  console.log("Hello!");
};

 

⚠️ let, const는 왜 에러가 발생하는가?

console.log(name); // ReferenceError
let name = "Alice";

let과 const도 선언은 호이스팅되지만,

초기화되기 전까지는 TDZ(Temporal Dead Zone) 상태에 있으므로 접근 시 ReferenceError가 발생한다.

 

다음 예제를 보면 TDZ가 어떻게 작동하는지 더 명확하게 확인할 수 있다:

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

위 코드에서 블록 내부의 console.log(x)는 같은 블록 스코프 내에서 아직 초기화되지 않은 x에 접근하기 때문에 ReferenceError가 발생한다.

 

❓ 자바스크립트는 인터프리터 언어인데, 어떻게 호이스팅이 가능한가?

자바스크립트는 인터프리터 언어이지만, 실행 전에 전체 코드를 한 줄씩 바로 실행하는 것이 아니라 먼저 구문 분석(parse) 단계를 거친다. 이때 자바스크립트 엔진(V8, SpiderMonkey 등)은 코드를 실행하기 전 실행 컨텍스트를 생성하고, 그 과정에서 변수와 함수의 선언 정보를 먼저 수집해 환경 레코드에 저장한다. 이 선언 수집 단계에서 이루어지는 동작이 바로 호이스팅이다.

 

이 과정을 통해 자바스크립트는 인터프리터 언어임에도 불구하고 컴파일 언어처럼 선언을 미리 인식하고 처리할 수 있으며, 이로 인해 호이스팅 현상이 발생한다.

📚 참고 자료

• MDN - Hoisting
• 유튜브: 호이스팅 설명