자바스크립트에서 변수, 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 동작을 말합니다.
코드가 실행되기 전, 선언 부분이 먼저 처리되어 실행 컨텍스트의 초기화 단계에서 메모리에 등록되는 것이다.
예제 1: 변수 호이스팅
console.log(a); // undefined
var a = 10;
console.log(a); // 10위의 코드는 다음과 같이 동작한다.
var a; // 선언이 먼저 끌어올려짐
console.log(a); // undefined (초기화는 안 됨)
a = 10;
console.log(a); var로 선언된 변수는 선언과 초기화는 끌어올려지지만 값 할당은 끌어올려지지 않기 때문에, 값 할당이 이뤄지기 전까지는 undefined로 평가됩니다.
let과 const는 왜 다르게 동작할까?
console.log(b); // ❌ ReferenceError
let b = 5;let, const도 호이스팅은 되지만, var와 달리 “TDZ (Temporal Dead Zone, 일시적 사각지대)” 라는 개념 때문에 초기화 전에는 접근이 불가능합니다.
TDZ는 변수가 선언되었지만 초기화되기 전까지의 구간을 말합니다. TDZ는 코드에서 변수가 선언된 시점부터 초기화될 때까지의 구간에서 변수를 사용하지 못하게 막아주는 역할을 합니다.
이런 기능이 필요한 이유는 안정성과 디버깅 용이성 향상에 있다. 초기화 순서를 엄격히 지킬 수 있어
console.log(a); // undefined
var a = 10;와 같은 버그 가능성을 미연에 방지할 수 있다.
예제 2: 함수 선언식의 호이스팅
greet(); // ✅ 정상 실행
function greet() {
console.log("Hello!");
}function 키워드로 선언된 함수는 전체 함수 정의가 통째로 호이스팅됩니다.
따라서 호출이 함수보다 앞에 있어도 문제 없이 실행됩니다.
함수 표현식의 경우는 다르다!
sayHello(); // ❌ TypeError: sayHello is not a function
var sayHello = function() {
console.log("Hi");
}sayHello는 변수로서 undefined가 먼저 할당되기 때문에, 호이스팅 후 undefined()를 실행하려다 에러가 발생합니다.
자바스크립트는 어떻게 호이스팅을 할까?
자바스크립트 엔진은 코드를 아래의 두 단계로 나눠 처리합니다:
- 컴파일 단계 (Compile Phase)
- 실행 단계 (Execution Phase)
이 두 단계 중 “컴파일 단계”에서 선언이 먼저 처리되기 때문에, 호이스팅이라는 현상이 발생합니다.
컴파일 단계
코드가 실행되기 전, 자바스크립트 엔진은 먼저 코드를 스캔하여 변수 선언(var)과 함수 선언(function)을 찾아 미리 메모리에 등록합니다.
이 단계에서는 할당은 하지 않고, 단순히 “이 변수가 존재한다”는 사실만 기록합니다.
선언은 이미 메모리에 존재하므로 오류는 발생하지 않지만, 아직 값은 없어서 undefined가 출력됩니다.
실행 단계
컴파일이 끝나면 이제 실행 단계로 넘어가며,
앞서 선언된 변수와 함수들이 실제로 할당되고 실행됩니다.
그럼 이런 문제 많은 호이스팅 왜 도입되었나?
처음에 자바스크립트는 웹 브라우저에서 작은 스크립트를 실행하기 위해 설계됐습니다.
이때 변수나 함수를 선언한 위치에 상관없이 자유롭게 호출할 수 있어야 유연한 개발이 가능했다.
하지만 es6이후, 이런 유연함이 예측하기 어려운 버그를 발생시키기 때문에 let, const를 도입하게 되었다.
