📌 호이스팅이란? JS 변수 선언의 동작 원리 정리

자바스크립트를 공부하다 보면 꼭 한번은 만나는 개념이 있다. 바로 호이스팅(Hoisting)이다.
이 단어만 들으면 어렵게 느껴지지만, 사실 개념은 단순하다.
호이스팅은 "끌어올린다"는 뜻 그대로, 자바스크립트가 실행 전에 변수나 함수 선언을 위로 올리는 현상이다.

🎬 호이스팅은 실행 전에 벌어지는 일

자바스크립트는 코드를 실행하기 전에 한 번 스캔을 한다.
이때 변수 선언(var, let, const)과 함수 선언이 있는지 확인하고, 메모리에 미리 등록해둔다.
그래서 코드보다 먼저 선언이 처리된 것처럼 보이게 된다.
이걸 바로 호이스팅이라고 부른다.

🧪 예제로 이해하는 호이스팅

예제 1 – var 변수

console.log(a);
var a = 10;

이 코드는 에러가 날까? 아니다. 결과는 undefined다.

왜 그럴까?

자바스크립트는 위 코드를 실행 전에 이렇게 바꿔 놓는다.

var a;             // 선언이 먼저 올라감
console.log(a);    // 아직 할당이 안 됐으니 undefined
a = 10;

즉, var는 선언 + undefined로 초기화가 동시에 이뤄지기 때문에 에러가 나지 않는다.

예제 2 – let 변수

 

console.log(b);
let b = 10;

이번엔 어떻게 될까? 이번엔 ReferenceError가 발생한다.

이유는?

let과 const도 선언은 호이스팅되지만, 초기화는 나중에 된다.
초기화 전에 변수에 접근하면 안 되는데, 이걸 일시적 사각지대(TDZ)라고 부른다.

즉, let은 아래처럼 해석된다.

// b는 선언만 되었고 아직 초기화 안 됨
console.log(b); // ReferenceError
let b = 10;

예제 3 – const 변수 ✅ (추가!)

 

console.log(food);
const food = "bread";

결과는 ReferenceError가 나온다.

왜 그럴까?

const도 let과 마찬가지로 호이스팅은 되지만 초기화되지 않기 때문이다.
초기화 전에 접근하면 **일시적 사각지대(TDZ)**에 걸려서 에러가 발생한다.

이 코드도 자바스크립트는 아래처럼 해석한다.

// 선언은 호이스팅되었지만 초기화 안 됨
console.log(food); // ❌ ReferenceError
const food = "bread";

💡 추가로 알아두면 좋은 점

let과 const 모두 TDZ에 걸리지만, const는 초기화 이후에도 값을 재할당할 수 없다는 점이 다르다.

const x = 5;
x = 10; // ❌ TypeError: Assignment to constant variable.

🧠 실전에서 틀리기 쉬운 코드들

❌ 오답 1

console.log(name);
var name = "홍길동";

✅ 실제 결과: undefined

자바스크립트는 var name을 맨 위로 끌어올린다.
초기값은 undefined가 자동으로 들어가 있으니, 에러 없이 undefined가 출력된다.

❌ 오답 2

console.log(age);
let age = 18;

✅ 실제 결과: ReferenceError

let은 호이스팅은 되지만 초기화되지 않아서, 변수 접근 시 에러가 발생한다.
이런 구간을 일시적 사각지대(TDZ)라고 부른다.

❌ 오답 3

sayHi();

function sayHi() {
  console.log("안녕~");
}

✅ 실제 결과: "안녕~"

함수 선언문은 아예 통째로 끌어올려진다.
그래서 호출이 위에 있어도 잘 동작한다.

❌ 오답 4

greet();

var greet = function () {
  console.log("하이~");
}

✅ 실제 결과: TypeError

이 코드는 var greet = ...이기 때문에, greet는 처음엔 undefined로 세팅된다.
undefined()는 함수가 아니므로 TypeError가 발생한다.

📝 핵심 요약

구분	호이스팅됨	초기화 여부	선언 전 접근 시 결과
var	O	O (undefined)	가능 (값은 undefined)
let, const	O	X	❌ ReferenceError
함수 선언문	O (함수 전체)	O	가능
함수 표현식	O (변수만)	O (undefined)	❌ TypeError

💡 결론

• 호이스팅은 코드 실행 전에 선언을 끌어올리는 자바스크립트의 특성이다.
• var는 너무 관대해서 undefined라도 반환해준다.
• let과 const는 엄격해서 선언 전에 접근하면 에러를 뿜는다.
• 함수 선언문은 통째로 끌어올려지기 때문에 어디서든 호출 가능하다.
• 함수 표현식은 변수만 끌어올라서 실수하면 에러를 볼 수 있다.