Hoisting(호이스팅)

Hoisting 이란?

호이스팅(Hoisting) 은 자바스크립트 엔진이 코드를 실행하기 전에 변수 선언과 함수 선언을 메모리에 먼저 올려두는 동작을 말합니다.

 

 

예제 코드

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

• 결과는 에러가 아니라 undefined가 출력됩니다.
• 자바스크립트 엔진이 내부적으로 아래처럼 해석하기 때문입니다.

var a;           // 선언이 끌어올려짐
console.log(a);  // undefined
a = 10;          // 값 할당

 

 

 

호이스팅의 대상

선언부만 호이스팅 되고, 값의 할당(초기화)은 호이스팅되지 않습니다.

• var 변수: 선언이 호이스팅되며 초기값은 undefined
• let / const: 호이스팅은 되지만 TDZ(Temporal Dead Zone) 때문에 선언 전에 접근 시 에러 발생
• 함수 선언문: 전체 함수가 호이스팅 → 어디서든 호출 가능
• 함수 표현식: 변수 규칙을 따름 (선언만 호이스팅, 초기화는 X)

 

 

var vs let/const 차이

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

// let
console.log(y); // ReferenceError
let y = 5;

// const
console.log(z); // ReferenceError
const z = 5;

• let과 const는 호이스팅되지만 TDZ 때문에 선언 전 접근이 불가능합니다.

 

함수 선언문 vs 함수 표현식

// 함수 선언문
foo(); // "Hello"
function foo() {
  console.log("Hello");
}

// 함수 표현식
bar(); // TypeError: bar is not a function
var bar = function() {
  console.log("Hi");
};

• 함수 선언문: 전체 함수가 호이스팅 → 어디서든 호출 가능
• 함수 표현식: 변수처럼 취급되어 undefined 상태에서 접근 → 호출 불가

 

---

 

호이스팅으로 인한 흔한 버그

function example() {
  console.log(msg); // undefined
  if (false) {
    var msg = "Hello";
  }
  console.log(msg); // undefined
}
example();

• if(false) 블록은 실행되지 않지만, var 선언은 호이스팅 때문에 함수 스코프에 이미 존재합니다.
• 그래서 undefined가 출력됩니다.

 

---

 

 정리

• Hoisting = 선언부가 코드 최상단으로 끌어올려지는 현상
• var: 선언만 호이스팅, 값은 undefined
• let / const: 호이스팅은 되지만 TDZ 때문에 선언 전 접근 불가
• 함수 선언문: 전체 함수가 호이스팅
• 함수 표현식: 변수 규칙을 따름
• var 대신 let, const 사용하기
• 함수는 가급적 선언문으로 작성해 안정적인 호출 보장하기