[Javascript] 자바스크립트 호이스팅(Hoisting) 완전 정복 - 변수, 함수, let vs var의 차이까지!

JavaScript에서 코드를 작성하다 보면 “변수를 선언하기 전에 썼는데 왜 오류가 안 나지?” 하는 경험을 해봤을 것이다. 이 현상의 정체가 바로 호이스팅(Hoisting)이다.

이번 포스팅에서는 호이스팅이 정확히 무엇인지, 어떤 요소들이 호이스팅되는지, 그리고 실무에서 어떻게 안전하게 코드를 작성해야 하는지까지 깔끔하게 정리해본다.

 

 

---

 

🧠 호이스팅(Hoisting)이란?
"선언부가 코드의 맨 위로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징"

실제로 코드가 이동하는 건 아니지만, 자바스크립트 엔진이 실행 전에 변수와 함수의 선언을 ‘미리 메모리에 등록’해놓기 때문에 발생하는 현상이다.

 

 

---

 

🔍 예제를 보며 이해해보자
✅ 변수 호이스팅 (var)

console.log(a); // undefined
var a = 10;

 

a가 선언되기 전에 사용되었지만 오류는 발생하지 않는다.
var a는 호이스팅되어 선언만 올라가고, 할당은 원래 자리에 있기 때문
실제로는 이렇게 동작한 것처럼 보인다.

var a;
console.log(a); // undefined
a = 10;

 

 

 

---

 

⚠️ let, const는 다르게 동작한다!

console.log(b); // ❌ ReferenceError
let b = 20;

 

let이나 const는 호이스팅은 되지만 "TDZ(Temporal Dead Zone)" 때문에 실제 코드 이전에는 접근할 수 없다.
즉, 선언은 내부적으로 먼저 처리되지만 사용할 수 없어서 에러가 난다.

 

---

 

 

✅ 함수 선언문은 완전한 호이스팅!

sayHi(); // ✅ 정상 실행

function sayHi() {
  console.log("안녕!");
}

 

함수 선언은 전체가 호이스팅되므로 선언 전에 호출해도 정상 동작

 

 

---

 

⚠️ 함수 표현식은 변수처럼 동작한다

sayHi(); // ❌ TypeError: sayHi is not a function

var sayHi = function () {
  console.log("안녕!");
};

 

sayHi는 var로 선언된 변수로 처리되므로, 호이스팅 시에는 undefined 상태
그래서 함수 호출이 아닌 undefined()가 되어 오류 발생

 

---

 

 

🔬 어떤 게 호이스팅되는가?

항목	호이스팅 여부	초기화 상태	사용 가능 여부
var 변수	✅ 됨	undefined	선언 전 사용 가능 (단, 값은 없음)
let, const	✅ 선언만 됨	초기화 전 TDZ	❌ 선언 전 사용 불가 (ReferenceError)
함수 선언문	✅ 됨	함수 전체	✅ 선언 전 호출 가능
함수 표현식 (var)	✅ 변수만 됨	undefined	❌ TypeError 발생
클래스 선언	✅ 선언만 됨	초기화 전 TDZ	❌ 선언 전 사용 불가 (ReferenceError)

 

 

 

---

 

🧭 TDZ(Temporal Dead Zone)란?
let과 const, 클래스 선언에서 호이스팅은 되지만 실제 초기화 전에 접근하면 에러가 나는 구간

console.log(x); // ReferenceError
let x = 5;

 

x는 선언은 호이스팅되었지만 초기화되지 않은 상태
이 시점부터 변수 선언 줄까지가 TDZ

 

 

---

 

 

✅ 정리: 안전한 코드 작성을 위한 팁
- ✅ 항상 변수를 상단에 선언하자
- ✅ 함수는 선언문으로 정의하면 가독성과 안정성이 높다
- ❌ var는 혼란의 씨앗 → let/const를 사용하자
- ❗ TDZ를 의식하면서 let/const 사용하기