[호이스팅] 변수 선언의 비밀

728x90

호이스팅(Hoisting) 

JavaScript에서 var, let, const로 선언한 변수를 실행 전에 사용할 수 있을까? 결론부터 말하면,어느 정도는 가능하지만 조건이 있습니다. 이 글에서는 JavaScript의 호이스팅(Hoisting) 개념을 정리하고, 키워드별 차이점과 흔한 오류까지 실제 예제를 중심으로 설명합니다.

 

---

1.  호이스팅이란?

호이스팅(Hoisting)이란, JavaScript에서 변수, 함수 선언이 코드 실행 전에 메모리에 끌어올려지는 현상을 말합니다. 즉, 코드 순서상 나중에 등장하는 선언도, 실행 컨텍스트 생성 시점에서 이미 등록되어 있음을 의미합니다.

예제

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

• 실행되기 전에 var x; 선언이 끌어올려집니다.
• x = 5 는 런타임에 수행됩니다.
• 그래서 출력은 undefined 입니다.

실제 해석 구조

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

 

---

2.  함수 선언도 호이스팅된다

greet(); // Hello

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

• 함수 선언문(function)은 전체가 호이스팅됩니다.
• 그래서 호출을 선언보다 앞에 해도 동작합니다.

그러나

sayHi(); // ❌ TypeError

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

• 함수 표현식은 var 키워드에 의한 변수 호이스팅만 발생합니다.
• 값은 undefined 상태라 호출 시 TypeError 가 발생합니다.

 

---

3.  let, const와 호이스팅 - TDZ에 주의!

let과 const도 호이스팅되긴 합니다. 하지만 변수에 접근할 수 없는 TDZ(Temporal Dead Zone) 상태가 존재합니다.

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

console.log(b); // ❌ ReferenceError
const b = 20;

• 선언은 호이스팅되지만, 초기화가 되지 않아 선언 전 접근 시 오류가 발생합니다.

TDZ (Temporal Dead Zone)란?

선언은 되어 있지만, 초기화 전까지 접근이 금지된 영역입니다. let과 const는 선언 전 접근 시 명확한 ReferenceError가 발생합니다. 이로 인해 더 안전하고 예측 가능한 코드 작성이 가능합니다.

 

---

4.  키워드별 호이스팅 비교 정리

키워드	호이스팅 여부	초기화	선언 전 접근 시
var	✅ 됨	undefined	가능 (단, undefined)
let	✅ 됨	❌ 안 됨	❌ ReferenceError
const	✅ 됨	❌ 안 됨	❌ ReferenceError

 

---

5.  마무리

• JavaScript는 실행 전에 변수/함수 선언을 호이스팅합니다.
• var는 호이스팅 + 초기화(=undefined) 됩니다. → 버그의 원인이 되기도 함
• let, const는 호이스팅되지만 TDZ 때문에 선언 전 접근 금지 상태입니다.
• 함수 선언문은 완전히 호이스팅되지만, 함수 표현식은 그렇지 않습니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Hoisting

블로그 글 :

[var, let, const] 자바스크립트 변수 선언의 차이점과 쓰임새

[실행 컨텍스트] JavaScript는 이렇게 코드를 실행한다.

[스코프] 변수는 어디까지 살아있을까?

 

---

반응형