[FE] 호이스팅(Hoisting)이란?

호이스팅(Hoisting) 은 변수와 함수의 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특성이다.

📌 변수 호이스팅(var, let, const)

var

• var로 선언된 변수는 호이스팅이 된다.
• 초기화(할당)는 호이스팅되지 않는다.

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

변수 a는 선언만 호이스팅되었고, 초기화(값 할당)는 호이스팅되지 않았기 때문에 실행 시점에는 값이 없는 상태(undefined)로 존재한다.

자바스크립트는 내부적으로 아래와 같은 방식으로 처리한다.

var a;         // 선언은 호이스팅됨
console.log(a); // undefined
a = 3;         // 할당은 이후에 실행됨

✅ undefined가 출력되는 이유는 초기화(할당)가 호이스팅되지 않았기 때문이다.

let, const

• let, const 역시 선언은 호이스팅은 된다.
• 초기화(할당)는 호이스팅되지 않는다.
• 초기화 전까지 TDZ(Temporal Dead Zone) 라는 일시적 사각지대에 있다.
  (이 구간에서는 변수에 접근하는 것 자체가 불가능하며 ReferenceError가 발생한다.)

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

console.log(c); // ❌ ReferenceError
const c = 10;

⚠️ 변수 호이스팅은 애매한 표현?

• var, let, const 모두 선언은 호이스팅이 된다.
• 하지만 초기화(값 할당)는 호이스팅되지 않기 때문에, 실제 실행 흐름과 달라 오해를 낳을 수 있다.

따라서 정확한 표현은 👉🏻 변수 선언은 호이스팅되지만, 초기화(할당)은 호이스팅되지 않는다.

📌 함수 호이스팅

함수 선언문(Function Declaration)

greet(); // Hello

function greet() {
  console.log('Hello');
}

• 선언 전체가 호이스팅된다.
• 함수 선언 이전에 호출해도 정상적으로 동작한다.

함수 표현식(Functinon Expression)

sayHi(); // ❌ TypeError 또는 ReferenceError

var sayHi = function () {
  console.log('Hi');
};

• 변수처럼 취급되므로 let, const, var의 호이스팅 규칙을 따른다.
• 선언 전에 접근 시 ReferenceError 또는 undefined가 발생한다.

💡 정리

✔️ 선언은 호이스팅된다.
✔️ 초기화는 호이스팅되지 않는다.
✔️ var는 접근 가능(값은 undefined), let/const는 접근 불가(TDZ)
✔️ 함수 선언문은 전체가 호이스팅된다.