0. 들어가면서
면접 준비를 하며 이런 저런 영상을 찾아보다 호이스팅에 대한 영상을 보게 되고 평소에 잘 신경 쓰지 않던 개념이라 이번에
포스팅을 하며 한 번 정리를 하고자 합니다.
**호이스팅(Hoisting)**은
자바스크립트의 실행 컨텍스트에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 말합니다.
이로 인해 코드의 순서와는 다르게 작동하는 경우가 생기며,
정확히 이해하지 않으면 예기치 못한 결과나 버그를 경험할 수 있습니다.
🧠 1. 호이스팅의 기본 개념
자바스크립트는 실행 전에 변수 선언(var, let, const)과 함수 선언을 메모리에 미리 할당합니다.
다만, 할당 방식과 초기화 시점에 따라 작동 방식이 다릅니다.
console.log(a); // undefined
var a = 10;
→ 위 코드에서는 a가 선언되기 전에 사용되었지만 오류가 발생하지 않고 undefined가 출력됩니다.
// 실제로는 이렇게 해석됨
var a;
console.log(a); // undefined
a = 10;🔧 2. 변수 선언의 호이스팅 차이
| 선언 방식 | 호이스팅 여부 | 초기화 시점 | TDZ(Temporal Dead Zone) |
| var | ✅ 됨 | undefined로 초기화 | ❌ 없음 |
| let | ✅ 됨 | 초기화 안 됨 (에러) | ✅ 있음 |
| const | ✅ 됨 | 초기화 안 됨 (에러) | ✅ 있음 |
예시: let과 const는 선언 전에 접근하면 오류
console.log(b); // ❌ ReferenceError
let b = 5;
🛠️ 3. 함수 선언 vs 함수 표현식
함수 선언식 (Function Declaration)
sayHello(); // "Hello"
function sayHello() {
console.log("Hello");
}
→ 함수 선언식은 전체가 호이스팅되어 어디서든 호출 가능.
함수 표현식 (Function Expression)
sayHi(); // ❌ TypeError: sayHi is not a function
var sayHi = function () {
console.log("Hi");
};
→ 변수는 호이스팅되지만, 함수는 런타임에 할당되므로 오류 발생.
⚠️ 4. 호이스팅 관련 흔한 실수
1. undefined 출력 예상 못함
console.log(num); // undefined
var num = 42;2. TDZ로 인한 오류
console.log(x); // ❌ ReferenceError
let x = 10;
✅ 5. 올바른 코드 작성 팁
- 항상 변수 선언은 위쪽에 몰아서 명확하게 작성
- let/const를 기본으로 사용하여 TDZ로 안전성 확보
- 함수는 가능하면 선언식을 사용하거나, 표현식을 선언 이후에 호출
📌 마무리 정리
자바스크립트의 호이스팅은 JS 엔진의 동작 방식에서 비롯된 자연스러운 현상입니다. 하지만 이를 정확히 이해하지 않으면 생각과 다른 결과가 나올 수 있어요. 호이스팅을 이해하고 예측 가능하게 작성하는 습관이 중요한 것 같습니다.
이 포스트에 이어서 ES6 이후 호이스팅 동작 정리, TDZ 심화, 면접 질문 대응 예시 등도 확장하여 포스팅할 예정입니다.
📚 참고자료