[Javascript] 호이스팅(Hoisting)

변수 및 함수 선언을 유효 범위(scope)의 맨 위로
이동하는 것처럼 보이게 하는 JS의 기본(default) 동작

 

개념

• JS의 모든 선언에 호이스팅이 발생한다 = 모든 선언이 코드 실행 전에 메모리에 저장된다.
• 그렇기 때문에 선언문보다 참조나 호출이 먼저 나와도 오류 없이 실행된다.
• let, const, class가 호이스팅되지 않은 것으로 보이는 이유는 일시적 사각지대(TDZ)에 들어있기 때문이다.

 

변수 호이스팅 (Variable Hoisting)

변수 호이스팅은 선언 방식에 따라 크게 2가지로 나뉜다.

 

1. var로 선언: 값이 undefined로 초기화된다.

console.log(color); // undefined
var color = yellow;
console.log(color); // "yellow"

 위 코드는 아래와 같이 해석된다.

var color;
console.log(color); // undefined
color = yellow;
console.log(color); // "yellow"

2. let 또는 const로 선언: 값이 초기화되지 않는다

console.log(color); // ReferenceError
let color = yellow;
console.log(color); // "yellow"

이 경우 color가 초기화되지 않은 상태에서 참조해서 참조 에러가 발생하게 된다.

 

함수 호이스팅 (Function Hoisting)

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

 위 코드는 아래와 같이 해석된다.

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

함수의 경우, 아래와 같이 함수 표현식으로 작성하면 호이스팅이 발생하지 않는다.

func1(); // "Hello" 
func2(); // ReferenceError

function func1() {
  console.log("Hello");
}

const func2 = () => console.log("JS");

 

---

 

📌 TDZ(Temporal Dead Zone)

해당 범위(scope)의 맨 위에서 초기화 완료 시점 사이에 발생하는 사각지대이다.

{
  // customer의 TDZ 시작 (스코프 맨 위)
  const func = () => console.log(customer); // OK

  // TDZ 내부
  console.log(customer); // ReferenceError

  let customer = "thief"; // TDZ 종료
  func(); // TDZ 밖에서 호출 -> 정상 동작
}

이는 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성된다.

 

---

Reference

[JavaScript] 호이스팅(Hoisting)이란?

Hoisting in React

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의