JS의 호이스팅(Hoisting) 개념과 작동원리

호이스팅(Hoisting)

JS에서 변수와 함수 선언이 해당 코드가 실행되기 전에 자동으로 코드의 상단으로 끌어올려지는 동작.

변수를 어디에 선언했든지 JS가 그것을 자동으로 코드의 최상단으로 옮겨서 해석하는 것.

변수의 초기화(값 할당)는 끌어올려지지 않기 때문에, 선언만 올라가고 초기화는 여전히 그 위치에서 일어난다.

변수의 호이스팅

/* 코드를 이렇게 작성했을 경우 */
console.log(a); // undefined
var a = 10;
console.log(a); // 10

/* JS는 이렇게 해석한다 */
var a; // 선언만 호이스팅됨
console.log(a); // 값이 아직 할당되지 않음
a = 10; // 값 할당
console.log(a); // 10

함수의 호이스팅

호이스팅은 변수와 함수의 '선언'에서만 일어난다.

변수/함수 선언은 코드가 실행되기 전에 메모리에 먼저 등록되지만, 대입문/표현식은 코드가 실행되는 순간에 평가되기 때문에 호이스팅되지 않는다.

/* 함수 선언문 (호이스팅 가능) */
console.log(foo()); // "Hello"

function foo() {
  return "Hello";
}

/* 함수 표현식 (호이스팅 불가능) */
console.log(bar()); // TypeError: bar is not a function

var bar = function() {
  return "Hello";
};

클래스의 호이스팅

클래스는 선언하기 전에 사용하면 에러가 발생한다.

JS 엔진이 클래스 선언을 코드의 최상단으로 끌어올리지 않고, 선언된 위치에서만 정의하기 때문이다.

→ 클래스는 "일시적 사각지대(TDZ, Temporal Dead Zone)"에 놓여 있어서 선언 전에 접근할 수 없다.

const person1 = new Person("Alice", 30); // ReferenceError: Cannot access 'Person' before initialization

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

일시적 사각지대(Temporal Dead Zone, TDZ)

JS에서 let, const, class로 선언된 변수가 선언되기 전까지 접근할 수 없는 구간

변수가 선언되기 전에 그 변수를 사용하려고 하면 오류가 발생하는 구간

JS엔진은 코드를 실행하기 전에 변수를 선언했는지 미리 확인하는데 let, const, class로 선언된 경우에는 초기화하기 전에 TDZ에 들어간다. TDZ에 있는 동안에는 해당 변수를 사용할 수 없다.

- 장점: 변수를 사용하는 코드가 선언문보다 앞서 실행되지 않도록 보장하기 때문에 코드의 의도와 예측 가능성을 높여준다. 개발자가 변수의 선언과 사용 위치를 명확하게 관리할 수 있다.