2026-02-03

호이스팅(Hoisting)

호이스팅이란

변수와 함수 선언이 코드 실행 전에 스코프 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 동작 방식

자바스크립트 실행 과정과 호이스팅

• 실행 컨텍스트 생성 단계 (Creation Phase)
  • 변수 선언 수집
  • 함수 선언 수집
  • 스코프 생성
  • this 바인딩
• 실행 단계 (Execution Phase)
  • 코드 한 줄씩 실행
  • 값 할당
  • 함수 호출

변수 호이스팅 (var, let, const)

• var

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

  실제 내부 동작은 다음과 같다.

    var a;// 선언만 먼저
    console.log(a);
    a =10;// 할당은 실행 단계
  

  • 선언 O
  • 초기화 O (undefined)
  • 스코프: 함수 스코프

  ⇒ undefined로 접근 가능

• let / const

    console.log(b);// ReferenceError
    let b =10;
  

  • 선언 O
  • 초기화 X
  • 스코프: 블록 스코프

  ⇒ 호이스팅은 되지만 접근 불가

  ⇒ 이 구간이 TDZ (Temporal Dead Zone)

TDZ (Temporal Dead Zone)

변수 선언은 되었지만 초기화되지 않아 접근할 수 없는 구간

{
// TDZ 시작
console.log(x);// ReferenceError
let x =5;
// TDZ 종료
}

TDZ의 목적

• 예측 불가능한 코드 방지
• 선언 전에 사용하는 실수 방지

⇒ let, const가 안전

함수 호이스팅

• 함수 선언문 (Function Declaration)

    hello();// 정상 실행
      
    functionhello() {
    console.log("hi");
    }
  

  • 함수 전체가 호이스팅됨
  • 선언 + 정의 모두 끌어올려짐

  ⇒ 선언 전에 호출 가능

• 함수 표현식 (Function Expression)

    hello();// TypeError
      
    var hello =function () {
    console.log("hi");
    };
  

  내부 동작:

    var hello;// undefined
    hello();// undefined()
    hello =function() {};
  

  ⇒ 변수 호이스팅 규칙을 따름

• let/const + 함수 표현식

    hello();// ReferenceError
      
    consthello = () => {
    console.log("hi");
    };
  

  • TDZ에 걸려 실행 불가
  • 가장 안전한 형태

호이스팅 정리

호이스팅이 존재하는 이유

• 자바스크립트의 유연성
• 함수 선언을 자유롭게 배치할 수 있도록 하기 위한 설계

하지만 실무에서는

• 예측 어려움
• 버그 유발 가능성

⇒ 명시적인 코드 작성이 권장

실무 관점에서의 정리

• var 사용 지양
• let, const 사용
• 함수는 가능하면 선언 전에 사용하지 않기
• 함수 표현식 + const 조합 선호

constfetchData = () => {
// logic
};

참고자료

• https://velog.io/@1nthek/JavaScript-%EB%B3%80%EC%88%98%EC%99%80-%ED%95%A8%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
• https://yong-nyong.tistory.com/76
• https://cho9407.tistory.com/125