📌 자바스크립트 호이스팅(Hoisting) 정리
오늘은 자바스크립트의 호이스팅(Hoisting)이라는 개념에 대해 공부해봤다. 처음엔 좀 헷갈렸는데, 정리해보니 생각보다 단순한 개념이었다.
🔍 호이스팅이란?
자바스크립트에서는 코드가 실행되기 전에 변수나 함수의 선언부가 코드의 위쪽으로 끌어올려지는 현상이 일어난다. 이걸 호이스팅(Hoisting)이라고 부른다.
쉽게 말하면, 선언을 아래쪽에 적었어도 자바스크립트가 실행 전에 알아서 위로 올려서 처리해준다는 개념이다.
✅ 변수의 호이스팅
예를 들어 아래 코드를 보면,
console.log(x); // undefined
var x = 10;분명 x를 선언한 건 아래쪽인데, console.log(x)에서 에러가 나지 않고 undefined가 출력된다. 이유는 var 키워드로 선언한 변수는 선언만 위로 끌어올려지기 때문이다.
자바스크립트가 실제로는 이렇게 해석한다고 보면 된다:
var x;
console.log(x); // undefined
x = 10;즉, 변수 선언은 호이스팅되지만 값 할당은 호이스팅되지 않는다.
⚠️ let과 const는?
let이나 const로 선언한 변수도 호이스팅되긴 한다. 다만, "일시적 사각지대(TDZ, Temporal Dead Zone)"라는 개념 때문에 선언 전에 접근하면 에러가 발생한다.
console.log(y); // ReferenceError
let y = 10;var와는 다르게, 선언 전에 접근하면 에러가 난다.
🧩 함수의 호이스팅
함수도 호이스팅이 일어난다. 예를 들어,
sayHello(); // "안녕!"
function sayHello() {
console.log("안녕!");
}이런 함수 선언문은 아예 전체가 위로 끌어올려지기 때문에, 선언하기 전에 호출해도 잘 작동한다.
근데 함수 표현식은 다르다:
sayHi(); // TypeError: sayHi is not a function
var sayHi = function () {
console.log("안녕!");
};이 경우에는 sayHi라는 변수만 호이스팅되고, 값은 undefined로 초기화되기 때문에 실행할 수 없다.
📌 정리
| 구분 | 호이스팅 여부 | 선언 전에 사용 가능 여부 |
|---|---|---|
var 변수 | ✅ 선언만 호이스팅 | 🔸 가능하지만 값은 undefined |
let / const | ✅ 선언만 호이스팅 | ❌ ReferenceError 발생 |
| 함수 선언문 | ✅ 전체 호이스팅 | ✅ 사용 가능 |
| 함수 표현식 | ✅ 변수만 호이스팅 | ❌ TypeError 발생 |
🧠 느낀 점
호이스팅은 처음엔 좀 낯설지만, 원리를 알고 나니까 왜 undefined가 나오는지, 왜 에러가 나는지 이해할 수 있었다.
앞으로 코드를 작성할 때는 선언 위치에 더 신경 써야겠다.
