자바스크립트의 호이스팅이란?

JavaScript에서 호이스팅(Hoisting)은 변수나 함수 선언이 코드 실행 전에 해당 범위의 최상단으로 끌어올려지는 동작을 의미한다. 하지만 모든 선언이 동일하게 동작하는 것은 아니다.

🔍 호이스팅 기본 개념

  • JavaScript는 실행 전에 변수 선언(var, let, const)과 함수 선언을 메모리에 등록함
  • 이로 인해 선언 전에 참조해도 에러가 발생하지 않거나, 의외의 결과가 나올 수 있음
console.log(a); // undefined
var a = 10;

위 코드는 다음과 같이 동작함:

var a;           // 선언이 먼저 끌어올려짐
console.log(a); // undefined
a = 10;

📌 var, let, const의 차이점

✅ var는 선언만 끌어올려지고 초기화는 안됨

console.log(x); // undefined
var x = 5;

⚠️ let, const는 호이스팅되지만 TDZ(Temporal Dead Zone)에 갇힘

console.log(y); // ❌ ReferenceError
let y = 5;

console.log(z); // ❌ ReferenceError
const z = 5;
  • let과 const는 선언 전 접근 시 ReferenceError 발생
  • 실제 선언이 실행되기 전까지 TDZ(일시적 사각지대)에 있음

📌 함수 선언과 함수 표현식의 호이스팅

✅ 함수 선언문은 전체가 끌어올려짐

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

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

sayBye(); // ❌ TypeError: sayBye is not a function
var sayBye = function() {
  console.log("Bye");
};

✅ 정리

  • var는 선언만 호이스팅되며 값은 undefined
  • let, const는 TDZ로 인해 선언 전에 접근하면 에러
  • 함수 선언문은 전체가 호이스팅, 함수 표현식은 변수 호이스팅처럼 작동

호이스팅은 디버깅 시 예상치 못한 오류를 유발할 수 있기 때문에, 변수는 항상 상단에서 선언, 함수는 표현식보다 선언문 사용 권장합니다.