자바스크립트 호이스팅 (Hoisting)에 대해 알아보자! 🎈

1. 호이스팅이란 무엇인가요? 🤔

자바스크립트의 실행 컨텍스트에서 **호이스팅(Hoisting)**은 변수 선언과 함수 선언이 실제 코드에서 나타나는 위치와 관계없이 최상단으로 끌어올려지는 동작을 의미합니다. 하지만 끌어올려지는 것은 "선언" 부분이며, "할당"은 포함되지 않는다는 점을 명심해야 합니다.

호이스팅의 기본 개념을 코드로 살펴보겠습니다:

console.log(myVar); // 출력: undefined
var myVar = 10;
console.log(myVar); // 출력: 10

위 코드는 아래와 같이 동작합니다:

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

이처럼 변수 선언이 코드의 상단으로 끌어올려지는 것처럼 보이는 것이 호이스팅입니다.

---

2. 변수 호이스팅 🛠️

2.1 var 키워드

var 키워드는 변수 선언이 호이스팅되지만, 초기값은 호이스팅되지 않습니다. 초기값은 런타임 시 할당됩니다.

console.log(greeting); // 출력: undefined
var greeting = "Hello, World!";
console.log(greeting); // 출력: Hello, World!

호이스팅 결과:

var greeting;
console.log(greeting); // undefined
greeting = "Hello, World!";
console.log(greeting); // Hello, World!

2.2 let과 const 키워드

let과 const는 호이스팅되지만 **일시적 사각지대(TDZ, Temporal Dead Zone)**에 놓여 참조할 수 없습니다.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "Alice";

호이스팅 결과:

// 선언은 호이스팅되지만 초기화는 나중에 이루어짐
let name; // TDZ에 있음
console.log(name); // ReferenceError
name = "Alice";

💡 TDZ란? 변수 선언부터 초기화가 이루어질 때까지의 구간을 말하며, 이 구간에서는 변수를 사용할 수 없습니다.

---

3. 함수 호이스팅 ⚙️

3.1 함수 선언식 (Function Declaration)

함수 선언식은 전체 코드에서 사용할 수 있도록 호이스팅됩니다.

sayHello(); // 출력: Hello!

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

호이스팅 결과:

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

sayHello(); // Hello!

3.2 함수 표현식 (Function Expression)

함수 표현식은 변수처럼 동작하므로 초기화 이전에는 사용할 수 없습니다.

sayHi(); // TypeError: sayHi is not a function

var sayHi = function () {
  console.log("Hi!");
};

호이스팅 결과:

var sayHi;
sayHi(); // TypeError
sayHi = function () {
  console.log("Hi!");
};

🔑 중요: 함수 선언식과 함수 표현식의 차이를 이해하는 것이 중요합니다.

---

4. 클래스 호이스팅 🏛️

class는 let과 유사하게 호이스팅되지만 초기화 전에 접근할 수 없습니다.

const instance = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
  constructor() {
    this.name = "MyClass";
  }
}

호이스팅 결과:

// 선언만 호이스팅되며 초기화 전에는 접근 불가
class MyClass {
  constructor() {
    this.name = "MyClass";
  }
}

---

5. 호이스팅으로 인한 버그 예방하기 🔍

5.1 let과 const 사용하기

var 대신 let과 const를 사용하여 TDZ를 활용하면 예기치 않은 동작을 방지할 수 있습니다.

let count = 5;

if (true) {
  let count = 10; // 블록 스코프
  console.log(count); // 출력: 10
}

console.log(count); // 출력: 5

5.2 코드 가독성 향상

변수와 함수 선언을 코드 상단에 배치하여 명확성과 유지보수성을 높입니다.

---

6. 요약 📜

• 호이스팅은 변수 및 함수 선언이 코드 상단으로 끌어올려지는 동작입니다.
• var는 선언만 호이스팅되며 초기화는 런타임에 이루어집니다.
• let과 const는 TDZ를 가지므로 초기화 전에는 사용할 수 없습니다.
• 함수 선언식은 완전히 호이스팅되지만 함수 표현식은 변수처럼 동작합니다.
• class는 초기화 전에 사용할 수 없습니다.

---