호이스팅

JavaScript에서 변수와 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상입니다.

왜 발생하나?

• JavaScript 엔진이 코드 실행 전에 먼저 선언부를 훑음
• 선언은 먼저 처리하고, 할당은 원래 위치에서 실행
• 실제로 코드가 이동하는 건 아니고 "그렇게 동작"하는 것

var의 호이스팅

console.log(name);  // undefined (에러 아님!)
var name = "홍길동";
console.log(name);  // "홍길동"

// 실제로는 이렇게 해석됨
var name;           // 선언이 최상단으로
console.log(name);  // undefined
name = "홍길동";    // 할당은 그 자리에
console.log(name);  // "홍길동"

let/const의 호이스팅

console.log(name);  // ReferenceError!
let name = "홍길동";

// 호이스팅은 되지만 TDZ(Temporal Dead Zone) 때문에 접근 불가

TDZ (일시적 사각지대)

// --- TDZ 시작 ---
console.log(name);  // 에러! TDZ 안에서 접근
// --- TDZ 끝 ---
let name = "홍길동";  // 여기서 TDZ 종료

• let/const도 호이스팅됨
• 하지만 선언 전까지 접근 불가 (TDZ)
• 더 안전한 코드 작성 유도

함수 호이스팅

// 함수 선언문 - 전체가 호이스팅
sayHello();  // "안녕!" (정상 동작)

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

// 함수 표현식 - 변수만 호이스팅
sayBye();  // TypeError: sayBye is not a function

var sayBye = function() {
  console.log("잘가!");
};

정리

실무 권장

// var 쓰지 말고
var name = "홍길동";  // X

// let/const 사용
const name = "홍길동";  // O
let count = 0;          // O