호이호이 호이스팅 정리

함수 호이스팅 vs 변수 호이스팅 정리#

자바스크립트에서 호이스팅(Hoisting) 이란 변수와 함수 선언이 실행 전에 코드의 최상단으로 끌어올려지는 현상을 의미합니다. 하지만 함수와 변수는 호이스팅되는 방식이 다릅니다.

✅ 함수 호이스팅 (Function Hoisting)#

함수 선언문(function foo() {}) 은 “선언과 초기화가 동시에 호이스팅” 됩니다. 즉, 코드가 실행되기 전에 함수가 메모리에 등록되므로 선언 이전에도 호출할 수 있습니다.

✅ 변수 호이스팅 (Variable Hoisting)#

변수 호이스팅은 선언만 위로 끌어올려지고, 초기화는 원래 코드 위치에서 실행됩니다. 변수의 호이스팅 방식은 var과 let, const에 따라 다릅니다.

1️⃣ `var` 변수 호이스팅#

var 키워드로 선언된 변수는 선언만 호이스팅되고, 초기화는 원래 자리에 남아 있습니다.
즉, 선언 전에 변수를 참조하면 undefined가 반환됩니다.

2️⃣ `let`, `const` 변수 호이스팅#

let과 const도 호이스팅되지만, 초기화되지 않은 상태에서는 “Temporal Dead Zone(TDZ)“에 위치하게 됩니다.
TDZ란 변수가 선언되었지만 초기화되기 전까지는 접근할 수 없는 구역을 의미하며, 선언 전에 접근하면 ReferenceError가 발생합니다.

🔥 최종 정리#

함수 선언문은 “함수 호이스팅”이 발생하여 선언 이전에도 호출 가능하다.
var 변수는 “변수 호이스팅”이 발생하여 선언만 끌어올려지고 초기화는 원래 위치에서 실행되므로 선언 전에 접근하면 undefined가 된다.
let과 const도 호이스팅되지만 초기화되지 않으면 “Temporal Dead Zone(TDZ)“에 존재하여 선언 전에 접근하면 ReferenceError가 발생한다.

💡 즉, 함수는 선언과 초기화가 함께 호이스팅되지만, 변수는 선언만 호이스팅되며 var은 undefined, let과 const는 TDZ에 의해 접근 불가! 🚀