호이스팅이란?

• 자바스크립트에서 호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 할당하는 것이다.

• 자바스크립트 엔진은 코드를 실행(Run Time) 하기 전에 코드를 형상화하는 과정을 거친다

  • 이 과정은 실행 컨텍스트를 위한 과정이다.

    JS_실행컨텍스트(Excute Context)

  <aside> 💡 이 과정에서 모든 선언을 스코프에 등록한다

  </aside>

  → 코드 실행 전 이미 변수선언, 함수 선언이 되어 있으므로 참조 혹은 호출시 오류가 나오지 않는다.

• 자바스크립트는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당한다.

  → 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있다.

  catName("다지");//"우리집 강아지🐶 이름은 다지입니다"
  
  function catName(name) {
    console.log("우리집 강아지🐶 이름은 " + name + "입니다");
  }
  

호이스팅 대상

• 자바스크립트에서는 초기화를 제외하고 선언만 호이스팅한다.

  (초기화는 하단에 있는 변수 생성 3단계를 참고)

  • 선언 O, 초기화

  console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
  var num; // 선언
  num = 6; // 초기화
  

  • 선언 X 초기화

  console.log(num); // ReferenceError
  num = 6; // 초기화
  

  ⇒ 선언이 없으므로 호이스팅 되지 않는다.

호이스팅 - 용어 사전 | MDN

변수 호이스팅

• 자바스크립트의 모든 선언(Declare)에는 호이스팅이 일어난다.

  • let, const, class는 스코프 시작에서 변수 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠진다.
  • → 즉, 이미 호이스팅은 발생했으나 (메모리에 저장된 상태이다) 초기화되지 않은 상태로 메모리에 저장만 되기 때문이다. 초기화 되지 않은 변수는 참조 할 수 없으므로 참조 에러가 발생한다.

  let dahye = 'dahye';
  {
    console.log(dahye); //can’t access ‘dahye’ before initialization
    let dahye = 'shin';
  }
  

  <aside> 💡 can’t access ‘dahye’ before initialization을 확인 할 수 있다.

  </aside>

변수 생성의 3단계

1 단계 : 선언 (Declare)