JavaScript Hoisting

안녕하세요. 오늘은 자바스크립트 호이스팅에 대해 알아볼게요.

 

 

 

호이스팅(Hoisting)

 

호이스팅은 변수와 함수의 선언(declaration)이 코드가 실행되기 전에

 

자바스크립트 엔진에 의해 최상단으로 끌어올려지는 동작을 말해요.

 

즉, 실제로 코드가 작성된 순서와는 달리, 선언이 먼저 처리되고 나중에 실행되는 것처럼 동작해요.

 

 

 

변수 호이스팅

 

변수는 크게 세 가지 var, let, const로 각각의 호이스팅 동작이 달라요.

 

 

var

 

var로 선언한 변수는 선언이 호이스팅 되지만, 초기화는 호이스팅 되지 않아요.

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


var a;           // 선언만 호이스팅
console.log(a);  // undefined
a = 5;           // 할당은 원래 위치
console.log(a);  // 5

 

 

let & const

 

let과 const는 호이스팅 되지만, 초기화 전에는 접근할 수 없어서 ReferenceError가 발생해요.

 

이를 Temporal Dead Zone(TDZ)라고 불러요.

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

console.log(c); // ReferenceError
const c = 15;

 

 

 

함수 호이스팅

 

함수도 선언 방식에 따라 호이스팅 방식이 다른데요. 

 

하나하나 알아볼게요.

 

 

1. 함수 선언문

 

함수 선언문은 함수 전체가 호이스팅이 되어서 선언 전에 호출이 가능해요.

sayHello(); // "Hello!"

function sayHello() {
  console.log("Hello!");
}

 

 

2. 함수 표현식

 

변수에 할당된 함수 표현식은 변수 선언만 호이스팅 되어서 호출 시점에는 아직 함수가 할당되지 않아 오류가 발생해요.

greet(); // TypeError: greet is not a function
var greet = function() {
  console.log("Hi!");
};

 

 

아래는 간단하게 보는 요약표에요.

 

구분	호이스팅 동작
var	선언만 호이스팅, 초기화 X → undefined
let/const	선언은 호이스팅되지만 TDZ → 초기화 전 접근 불가
함수 선언문	전체 호이스팅 → 선언 전 호출 가능
함수 표현식	변수 선언만 호이스팅 → 호출 시점에 함수가 없으면 오류

 

 

여기까지 호이스팅에 알아봤는데요.

 

포스팅 마치기 전 호이스팅이 핵심 포인트를 설명으로 마칠게요.

 

호이스팅은 "선언이 끌어올려지는 것이고, 초기화와는 다르다"는 게 핵심포인트!

 

기억해 주세요.