자바스크립트 호이스팅

자바스크립트 호이스팅 (Hoisting)

호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징을 말합니다.
이로 인해, 선언된 위치보다 상단에서 변수를 참조할 수 있는 것처럼 보이는 현상이 발생합니다.

---

변수 호이스팅

호이스팅은 선언만 끌어올리고, 값 할당은 끌어올리지 않습니다.

예를 들어 var로 선언된 변수는 선언과 초기화(undefined) 가 호이스팅되지만, 값 할당은 나중에 이루어집니다.

console.log(myVar); // undefined

var myVar = 10;
console.log(myVar); // 10

위 코드는 내부적으로 아래와 같이 동작하는 것과 같다.

var myVar;          // 선언과 초기화(undefined)만 먼저 실행됨
console.log(myVar); // undefined
myVar = 10;         // 이후 값 할당
console.log(myVar); // 10

즉, var는 초기화(undefined) 가 이루어지므로 ReferenceError가 발생하지 않는다.

---

함수 호이스팅

함수 선언식은 변수와 다르게 함수 전체가 호이스팅된다.
따라서, 선언 이전에 함수를 호출해도 정상적으로 동작한다.

console.log(myFunction()); // 'Hello World' 출력

function myFunction() {
  return 'Hello World';
}

---

let과 const의 TDZ (Temporal Dead Zone)

ES6에서 도입된 let과 const는 호이스팅되지만, 초기화가 이루어지기 전까지는 접근할 수 없다.
이 구간을 Temporal Dead Zone(TDZ) 이라고 부릅니다.

TDZ는 변수가 선언된 시점부터 초기화가 완료되기 전까지의 구간을 의미
이 시점에서 변수를 사용하려고 하면 ReferenceError가 발생합니다.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization

let myLet = 10;

즉, let과 const도 내부적으로는 호이스팅되지만,
초기화가 지연되기 때문에 TDZ 구간에서 접근이 불가능합니다.

---

정리

구분	호이스팅 여부	초기화 시점	초기화 전 접근 시
var	O (선언 + undefined 초기화)	선언 시	undefined
let	O (선언만)	코드 실행 시	ReferenceError
const	O (선언만)	코드 실행 시	ReferenceError
함수 선언식	O (함수 전체)	선언 시	정상 호출 가능

---

결론

• 호이스팅은 변수와 함수 선언을 코드 상단으로 끌어올리는 것처럼 동작하는 자바스크립트의 실행 메커니즘이다.
• var는 초기화까지 함께 이루어지므로 접근 시 undefined를 반환한다.
• let과 const는 TDZ 구간이 존재해 초기화 전 접근 시 ReferenceError가 발생한다.
• 함수 선언식은 전체가 호이스팅되어, 선언 이전에도 호출이 가능하다.

---

📚 요약

호이스팅은 “선언이 끌어올려진다”는 개념이며, 변수의 종류(var, let, const)에 따라 초기화 시점과 접근 가능 여부가 다르다.

---

END