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

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 미리 할당되는 동작을 의미한다. 즉, 코드가 실행되기 전에 변수와 함수의 선언이 자동으로 코드의 최상단으로 끌어올려지는 것처럼 동작한다.

 

 

 

---

1. 변수 호이스팅 (var, let, const 차이점)

 

(1) var 키워드

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

 

설명:

 

• var x = 10;이 실제로 실행되기 전에 var x; 선언이 호이스팅되어 undefined로 초기화된다.

• 따라서 console.log(x);를 실행할 때 undefined가 출력된다.

 

실제로 동작하는 방식:

var x; // (1) 선언이 먼저 올라감 (호이스팅됨)
console.log(x); // (2) undefined (초기화 X)
x = 10; // (3) 값 할당
console.log(x); // (4) 10

 

---

 

(2) let과 const 키워드

console.log(y); // ❌ ReferenceError: Cannot access 'y' before initialization
let y = 20;
console.log(y);

console.log(z); // ❌ ReferenceError: Cannot access 'z' before initialization
const z = 30;
console.log(z);

 

설명:

• let과 const는 호이스팅되지만, 초기화되지 않아서 접근할 수 없다.

• 이를 “TDZ(Temporal Dead Zone, 일시적 사각지대)”라고 한다.

 

TDZ란 무엇인가

[JS] TDZ(Temporal Dead Zone, 일시적 사각지대)란?

 

 

실제로 동작하는 방식:

// (1) let y; (호이스팅되지만 TDZ 상태)
console.log(y); // ❌ ReferenceError
y = 20; // (2) 값 할당
console.log(y);

 

---

 

✅ 정리

키워드	호이스팅 여부	초기화 여부	TDZ(일시적 사각지대)
var	O	undefined로 초기화	X
let	O	초기화되지 않음	O
const	O	초기화되지 않음	O

 

 

 

---

2. 함수 호이스팅 (Function Declaration vs Function Expression)

 

(1) 함수 선언문 (Function Declaration)

greet(); // ✅ 정상 실행

function greet() {
    console.log("Hello!");
}

 

설명:

• 함수 선언문은 전체가 호이스팅되므로, 선언 이전에 호출해도 정상적으로 실행된다.

 

실제로 동작하는 방식:

function greet() { // (1) 함수 선언이 최상단으로 이동
    console.log("Hello!");
}

greet(); // (2) 정상 실행

 

---

 

(2) 함수 표현식 (Function Expression)

sayHello(); // ❌ ReferenceError: Cannot access 'sayHello' before initialization

const sayHello = function() {
    console.log("Hello!");
};

 

설명:

• sayHello는 const로 선언되었으므로 호이스팅은 되지만 초기화되지 않아 TDZ(일시적 사각지대)에 걸린다.

• 따라서 선언 전에 호출하면 ReferenceError가 발생한다.

 

 

 

---

3. 결론

1. var는 호이스팅되지만, undefined로 초기화되므로 주의해야 한다.

2. let과 const도 호이스팅되지만, TDZ(일시적 사각지대) 때문에 선언 전에 접근할 수 없다.

3. 함수 선언문은 전체가 호이스팅되므로 선언 전에도 호출 가능하다.

4. 함수 표현식은 변수에 저장되는 형태이므로 TDZ의 영향을 받아 선언 전에 호출하면 에러가 발생한다.

 

📌 요약:

• 변수 선언: let과 const는 TDZ가 존재, var는 undefined로 초기화됨

• 함수 선언문: 전체가 호이스팅되어 미리 호출 가능

• 함수 표현식: TDZ가 적용되므로 선언 전에 호출 불가