자바스크립트의 호이스팅이란?

2025-04-02 TIL-자바스크립트의 호이스팅이란?

자바스크립트의 호이스팅이란?

호이스팅(Hoisting)은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징이다.

호이스팅 예시

console.log(score); // undefined

var score = 80; // 변수 선언과 값의 할당

console.log(score); // 80

• 변수의 선언과 값의 할당을 하나의 문장으로 단축 표현해도 자바스크립트 엔진은 변수의 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다.

  console.log(score); // undefined
  
  var score; // 변수 선언
  
  score = 80; // 값 할당
  
  console.log(score); // 80
  

  • 변수 선언은 런타임 이전 단계에 먼저 실행되기 때문에 이런 현상이 발생한다.

    런타임: 소스코드가 한 줄씩 순차적으로 실행되는 시점.

ReferenceError

• ES6에서 도입된 let과 const는 호이스팅이 되긴 하지만, 선언하기 전에 접근하려고 하면 ReferenceError가 발생한다.

  모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문

  • 이는 Temporal Dead Zone(TDZ) 라는 개념 때문이다.

Temporal Dead Zone(TDZ)

• TDZ는 변수가 선언되었지만 초기화되기 전까지의 구간을 말한다.

  • let과 const로 선언된 변수는 TDZ가 존재하며, 이 구간에서는 변수에 접근할 수 없다.

    console.log(tdz); // ReferenceError 발생
    
    let tdz = 10;
    

    • 이 경우, 변수 선언은 호이스팅 되지만 초기화는 변수 선언이 실제로 실행될 때까지 이루어지지 않는다.