🔼 자바스크립트 "호이스팅"이 뭐예요? 쉽게 설명해드림!

안녕하세요! 👩‍💻
오늘은 자바스크립트를 처음 배우는 분들이 꼭 헷갈리는 개념,
바로 "호이스팅(Hoisting)"에 대해 아주 쉽게 알려드릴게요.

🧠 호이스팅이란?

"코드보다 먼저 선언이 메모리에 올라가는 현상"

자바스크립트는 코드를 한 줄씩 바로 실행하지 않고,
먼저 "컴파일 단계"를 거쳐 변수나 함수 선언을 미리 메모리에 등록해요.

이게 바로 "호이스팅(Hoisting)"입니다!

🧪 예시로 이해해보자

console.log(myVar);  // ⛔ undefined
var myVar = 5;
console.log(myVar);  // ✅ 5

🔍 왜 첫 줄에서 에러가 안 날까?

var myVar는 코드 맨 위로 끌어올려진 것처럼 처리돼요.
하지만 이 시점에서는 값이 할당되지 않았기 때문에 undefined!

🧱 실행 순서 실제로는 이렇게 동작함

var myVar;               // 호이스팅됨 (선언만 먼저 올라감)
console.log(myVar);      // undefined
myVar = 5;               // 값 할당
console.log(myVar);      // 5

✔️ 그래서 에러가 아니라 undefined가 나오는 것이에요!

🧨 그럼 let/const는?

console.log(myLet);  // ❌ ReferenceError!
let myLet = 10;

let과 const도 호이스팅은 되지만
"TDZ(Temporal Dead Zone)" 때문에 선언 전에 접근하면 에러가 나요! 🚫

📘 왜 호이스팅이 존재할까?

자바스크립트는 실행 전에 미리 변수와 함수를 컴파일 단계에서 준비해요.
덕분에 우리는 함수 선언을 나중에 해도 먼저 사용할 수 있어요!

sayHi();

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

✔️ 함수 선언도 호이스팅되기 때문에 이런 코드도 동작합니다!

✅ 정리 요약

구분 설명

호이스팅	선언이 코드보다 먼저 메모리에 등록되는 현상
var	선언은 올라가지만 값은 undefined로 초기화
let/const	선언만 올라가고, 초기화 전엔 접근 불가 (에러 발생)
함수 선언문	완전히 호이스팅됨 (사용 가능)

🎉 마무리

호이스팅은 자바스크립트의 동작 방식에 대한 기본 개념이에요.
이걸 이해하면 디버깅도 훨씬 쉬워지고, 예기치 않은 버그도 피할 수 있어요!

자바스크립트에서 어떻게 호이스팅이 가능한지에 대해서 설명해주세요.

자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기까지 두 단계의 과정을 거치기 때문입니다.

이 두 단계는 컴파일 단계와 실행 단계이며, 이 과정에서 호이스팅이 발생하게 됩니다. 구체적으로 말씀드려보겠습니다.

첫번째로 컴파일 단계입니다.

자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거칩니다. 이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당됩니다. 이때 변수와 함수 선언을 미리 메모리에 올려두기 때문에 실제 코드에서 선언된 위치보다 앞에서 접근이 가능해지는 것입니다.

let, const가 아닌 var를 통해 선언되면, 컴파일 단계에서 변수가 메모리에 올라가며, 이때 값은 undefined로 초기화됩니다. 이후 실행 단계에서 코드가 진행되면서 실제 할당된 값이 대입됩니다.

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

위의 예시에서 myVar 변수 선언이 코드의 최상단으로 "호이스팅"되어 컴파일 단계에서 메모리에 먼저 올라가고, 초기값은 undefined로 설정됩니다.

따라서 console.log(myVar)의 첫 번째 출력에서 undefined가 나오는 것입니다.

두번째로 실행 단계입니다.

실행 단계란 실제 코드가 실행되는 과정으로, 컴파일 단계에서 메모리에 할당된 변수와 함수가 실행됩니다. 여기서 변수가 할당된 값을 가지게 되고, 함수가 호출되면 그 안의 코드가 수행됩니다.

정리해서 말씀 드리겠습니다. 자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 단순히 한 줄씩 바로 해석하고 실행하지 않고, 먼저 컴파일 단계에서 코드를 파악하고 필요한 메모리를 확보하는 과정을 거치기 때문입니다.

이를 통해 코드 내에서 선언 위치와 상관없이 변수를 사용할 수 있는 유연성을 제공합니다.

728x90

저작자표시 (새창열림)