호이스팅(Hoisting)

자바스크립트를 배우다 보면 “선언이 끌어올려진다”는 말을 자주 듣게 된다.

하지만 정확히 언제, 왜 이런 일이 벌어질까?

이 글에서는 호이스팅이란 무엇인지, 평가 단계와의 관계, TDZ, var의 문제점,

그리고 호이스팅이 왜 중요한 개념인지를 함께 살펴본다.

 

1. 호이스팅이란?

호이스팅(Hoisting)은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 미리 메모리에 등록하는 현상을 말한다.

이로 인해 선언문이 실제 코드 아래에 있어도 마치 위로 끌어올려진 것처럼 작동한다.

(Hoist 의 사전적 의미는 "무언가를 들어올리거나 들어올리는 행위" 이다.)

console.log(name); // undefined (에러 아님)
var name = "Jay";

자바스크립트 엔진 내부에서는 다음과 같은 순서로 동작한다.

var name;          // 선언부가 먼저 평가 단계에서 등록됨
console.log(name); // 아직 초기화되지 않아 undefined
name = "Jay";      // 런타임에 값 할당

이처럼 런타임 전에 선언이 먼저 등록되기 때문에, 호이스팅이 발생한 것처럼 보이는 것이다.

 

2. 평가 단계와 호이스팅의 관계

자바스크립트는 실행 전 평가 단계(creation phase)를 거친다.

1. 평가 단계:
   • 스코프를 생성하고, 변수와 함수 선언을 메모리에 등록한다.
   • 함수 선언문은 전체 함수가 저장되고, 변수는 식별자만 저장된다.
   • 이 과정이 바로 호이스팅이다.
2. 실행 단계: 코드가 순서대로 실행되며, 평가 단계에서 등록된 식별자가 실제 값과 연결된다.

즉, 호이스팅은 코드 실행 전 메모리 준비 과정이며, 자바스크립트의 비동기적이고 유연한 실행 모델의 핵심이다.

 

3. TDZ(Temporal Dead Zone)

let과 const는 평가 단계에서 선언만 등록되고, 초기화(값의 할당)는 실행 단계에서 이루어진다.

따라서 선언문 이전에는 TDZ(Temporal Dead Zone, 일시적 사각지대) 에 놓인다.

console.log(a); // ReferenceError
let a = 10;

TDZ는 “변수가 아직 초기화되지 않았는데 접근하려는 시점”을 보호하는 장치다.

이로써 let과 const는 안전하게 사용할 수 있다.

 

4. var를 사용하면 안 되는 이유

var는 선언 시 undefined로 초기화되며, 함수 스코프만을 가진다.

이 때문에 선언 이전 접근 시 에러가 나지 않고 또한 블록 스코프를 무시한다.

if (true) {
  var x = 100;
}
console.log(x); // 100

위 코드에서 x는 if 블록 안에서 선언됐지만, 블록 외부에서도 접근할 수 있다.

이는 var가 블록 스코프(block scope) 가 아닌 함수 스코프(function scope) 를 따르기 때문이다.

함수 스코프 vs 블록 스코프

구분	설명	적용되는 키워드
함수 스코프 (Function Scope)	변수가 오직 함수 내부에서만 유효하다. 블록({})은 스코프를 만들지 않는다.	var, function
블록 스코프 (Block Scope)	{}로 구분된 블록마다 독립된 스코프가 생성된다. if문, for문, 함수 내부 등에서 각각 별도의 변수를 가질 수 있다.	let, const

예를 들어, 아래 코드를 보자.

function test() {
  if (true) {
    var a = 10;
    let b = 20;
    const c = 30;
  }

  console.log(a); // ✅ 10 (함수 스코프)
  console.log(b); // ❌ ReferenceError (블록 스코프)
  console.log(c); // ❌ ReferenceError (블록 스코프)
}
test();

var a는 함수 전체에서 접근 가능하지만, let b, const c는 if 블록이 끝나는 순간 소멸한다.

즉, var는 코드의 구조적 안정성을 해치며, 변수가 예상치 못한 위치에서 덮어써지는 버그를 유발할 수 있다.

 

5. 왜 호이스팅이 중요한가?

1. 코드의 실행 순서를 이해할 수 있다.

— 선언이 평가 단계에서 미리 처리되므로, 코드 순서만 봐서는 오해하기 쉽다.

— 호이스팅을 알면 ReferenceError나 undefined의 원인을 명확히 알 수 있다.

2. 스코프와 TDZ의 차이를 구분할 수 있다.

— 호이스팅은 단순히 “끌어올림”이 아니라 언제 변수가 메모리에 등록되는가의 문제다.

3. 안정적인 코드 작성 습관을 만든다

— 항상 변수를 상단에서 선언하고, let과 const를 사용하면 예측 가능한 코드 흐름을 유지할 수 있다.

 

6. 요약 및 정리

구분	평가 단계 처리	초기화 시점	TDZ 발생	스코프
var	선언 + undefined 초기화	평가 단계	❌	함수 스코프
let	선언만 등록	실행 단계	✅	블록 스코프
const	선언만 등록	실행 단계	✅	블록 스코프
function	전체 함수 등록	평가 단계	❌	블록/함수 스코프

호이스팅은 자바스크립트가 코드를 실행하기 전에 메모리를 어떻게 준비하는지 보여주는 핵심 메커니즘이다.

이를 이해하면 var의 위험성, TDZ의 역할, 그리고 실행 순서를 모두 명확히 파악할 수 있다.

 

따라서 안전한 코드를 위해서는 변수를 항상 블록 스코프(let, const) 로 선언하고, 호이스팅과 TDZ의 실행 시점을 이해해야 한다.

이것이 자바스크립트 코드의 예측 가능성과 안정성을 지키는 첫걸음이다.