[JS] 자바스크립트 호이스팅 쉽게 이해하기

자바스크립트를 공부하는 과정에서 자주 등장하는 개념 중 하나가 바로 호이스팅(Hoisting)입니다. 호이스팅은 자바스크립트의 변수 선언과 함수 선언이 코드 실행 전에 "끌어 올려진다"는 특성을 의미합니다. 이 글에서 호이스팅이 무엇인지, 어떻게 동작하는지, 그리고 이를 어떻게 다뤄야 하는지에 대해 설명하겠습니다.

 

 

🤔 호이스팅이란?

Hoisting 이미지

호이스팅(Hoisting)은 자바스크립트에서 변수 선언과 함수 선언이 실행되기 전에 스코프(범위)의 최상단으로 끌어올려지는 현상을 말합니다. 이때 사용된 단언 hoist는 hoist crane에서 따온 것으로 hoist crane은 위 이미지에서 볼 수 있는 공사현장의 크레인을 의미합니다. 즉, 자바스크립트 엔진은 코드 실행 전에 선언된 변수와 함수들을 미리 최상단으로 끌어올려 기억해두고, 이후에 차례대로 코드를 실행하는 것입니다.

이 특성으로 인해 변수나 함수를 선언하기 전임에도 불구하고 이를 사용할 수 있는 상황이 발생하기도 합니다. 하지만 여기서 중요한 점은 변수와 함수 선언은 끌어올려지지만, 변수 초기화나 함수 표현식은 끌어올려지지 않는다는 것입니다.

 

 

⚙️ 호이스팅 원리

자바스크립트는 코드를 실행할 때, Execution Context라는 것을 생성하고, 아래 2단계를 거칩니다:

1. Creation Phase (생성 단계)

→ 변수, 함수, 스코프 등을 메모리에 미리 할당
→ 이 때 호이스팅이 발생

2. Execution Phase (실행 단계)

→ 실제 코드가 한 줄씩 실행됨
→ 할당, 연산, 함수 호출 등이 이 단계에서 일어남

 

즉, 2번 실행 단계 전에 1번 생성 단계에서 인터프리터 형식으로 코드를 한줄한줄 실행하기 전에 변수, 함수, 스코프 등을 메모리에 미리 할당하기 때문에 호이스팅이라는 현상이 발생하게 됩니다.

 

 

📚 상세 설명

호이스팅은 여러 상황에 따라 다르게 작동합니다. 각 상황에 따른 상세 설명은 다음과 같습니다.

1. 변수

✅ var 변수

• 선언 : 호이스팅 ⭕️
• 초기화 : 호이스팅 ❌

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

위 코드에서 x는 변수 선언이 호이스팅 되어 코드 상단으로 끌어올려집니다. 그러나 x = 5는 호이스팅되지 않아서, x의 값은 undefined로 출력됩니다.

 

✅ let, const 변수

• 선언 : 호이스팅 ⭕️
• 초기화 : 호이스팅 ❌

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;

let과 const는 var와 달리 선언된 위치로 호이스팅되지만, 초기화 전에 접근하려고 하면 ReferenceError가 발생합니다. 이를 일시적 사각지대(Temporal Dead Zone, TDZ)라고 합니다.

 

2. 함수

✅ 선언식 함수

함수 선언식은 전체 코드 블록이 실행되기 전에 선언부가 끌어올려지고 초기화됩니다.

hello(); // "Hello, World!"
function hello() {
  console.log("Hello, World!");
}

 

✅ 표현식 함수

함수 표현식은 변수에 함수가 할당되는 방식이기 때문에 함수 표현식이 호이스팅되지 않습니다. 정확히 말하면 함수가 할당된 변수는 호이스팅되지만 함수 자체는 할당되지 않습니다.

hello(); // TypeError: hello is not a function
var hello = function() {
  console.log("Hello, World!");
};