[FE] 호이스팅(Hoisting) 개념과 동작 방식 정리

안녕하세요. 새내기 개발자입니다. 공부하면서 정리하는 글로 틀린 부분은 언제나 댓글로 환영입니다!

1. 호이스팅(Hoisting)이란?

호이스팅(Hoisting)이란 JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 저장되는 현상을 의미합니다. 즉, 선언된 변수와 함수가 코드의 상단으로 끌어올려지는 것처럼 동작합니다.

하지만, 실제로 코드가 이동하는 것은 아니며, JavaScript 엔진이 실행 전에 변수와 함수의 선언을 먼저 처리하는 과정에서 발생하는 현상입니다.

---

2. 변수 호이스팅

var 키워드의 호이스팅

var 키워드를 사용하여 변수를 선언하면 변수 선언만 호이스팅되고, 할당된 값은 호이스팅되지 않습니다.

console.log(name); // undefined
var name = "John";
console.log(name); // "John"

실제 실행 방식

위 코드는 JavaScript 엔진이 다음과 같이 해석합니다.

var name; // 선언이 먼저 실행됨 (호이스팅)
console.log(name); // undefined
name = "John"; // 값 할당
console.log(name); // "John"

즉, var로 선언한 변수는 초기 값이 undefined로 설정된 상태에서 실행됩니다.

---

let, const 키워드의 호이스팅

let과 const도 호이스팅이 되지만, TDZ(Temporal Dead Zone, 일시적 사각지대) 때문에 초기화 전에는 접근할 수 없습니다.

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

실제 실행 방식

// age 변수가 호이스팅되지만 초기화되지 않음
// (TDZ 영역에 있음)
let age; 
console.log(age); // ReferenceError 발생
age = 25;
console.log(age);

 

• let과 const 변수는 선언은 호이스팅되지만 초기화 전까지 접근이 불가능합니다.
• 따라서 var와 다르게 undefined가 아닌 ReferenceError가 발생합니다.

---

3. 함수 호이스팅

함수 선언문과 함수 표현식도 호이스팅이 발생하지만, 동작 방식이 다릅니다.

함수 선언문 (Function Declaration)

greet(); // "Hello, world!"

function greet() {
  console.log("Hello, world!");
}

 

• 함수 선언문(function)은 전체 함수가 호이스팅되기 때문에 선언 이전에도 호출할 수 있습니다.

---

함수 표현식 (Function Expression)

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

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

실제 실행 방식

var sayHello; // 변수 선언만 호이스팅 (초기값: undefined)
sayHello(); // TypeError 발생 (undefined를 호출하려고 함)

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

 

• sayHello는 변수로 선언되었기 때문에, var의 호이스팅 규칙을 따릅니다.
• 함수 선언문과 달리, 함수 표현식은 변수에 저장되므로 함수 자체가 호이스팅되지 않습니다.

---

4. 클래스 호이스팅

class도 let과 마찬가지로 TDZ(일시적 사각지대)가 적용됩니다.

const user = new User(); // ReferenceError: Cannot access 'User' before initialization

class User {
  constructor(name) {
    this.name = name;
  }
}

 

실제 실행 방식

// User가 호이스팅되지만 초기화 전까지 접근 불가
class User { 
  constructor(name) {
    this.name = name;
  }
}

• class는 함수와 달리 선언 이전에 사용할 수 없습니다.
• ReferenceError가 발생하며, let과 유사한 호이스팅 동작을 합니다.

---

5. 정리

요소	호이스팅 여부	초기 값
var	O	undefined
let	O (TDZ 적용)	없음 (ReferenceError 발생)
const	O (TDZ 적용)	없음 (ReferenceError 발생)
함수 선언문	O	전체 함수 사용 가능
함수 표현식	O (변수만)	undefined (호출 시 TypeError)
class	O (TDZ 적용)	없음 (ReferenceError 발생)

---

6. 호이스팅 방지 방법

1. let과 const 사용

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

let name = "John";
console.log(name); // 정상적으로 출력됨

2. 함수 표현식 사용

• 함수 선언문 대신 함수 표현식을 사용하면 의도치 않은 호이스팅을 방지할 수 있습니다.

const greet = function () {
  console.log("Hello");
};
greet();

3. 코드 구조 정리

• 변수를 사용하기 전에 항상 선언하는 것이 가장 안전한 방법입니다.

function example() {
  let age = 30;
  console.log(age);
}

---

7. 결론

호이스팅은 JavaScript의 중요한 개념으로, 변수와 함수 선언이 실행 전에 메모리에 할당되는 현상입니다.
하지만, var, let, const, function, class에 따라 동작 방식이 다르므로 올바르게 이해하고 사용해야 합니다.

✅ 좋은 코드 스타일을 유지하려면?

• var 대신 let과 const 사용하기
• 함수 선언 위치를 명확하게 정리하기
• TDZ(일시적 사각지대)를 고려하여 let, const, class 선언 전에는 사용하지 않기

이해하고 활용하면 예기치 않은 오류를 줄이고 더욱 안정적인 코드를 작성할 수 있습니다. 🚀