✅   정리

1. 호이스팅 됐지만, ReferenceError 발생 (TDZ 제한)

   • let, const, class구문, constructor() 내부의 super(), 기본함수 매개변수

2. 호이스팅 되고, ReferenceError 발생안함

   • var, 함수선언문, import모듈 선언

Hoisting ?

어디에 선언했는지와 상관없이
선언문이 최상단으로 끌어올려진 것 같은 현상

console.log(Infinite); // undefined

var Infinite = "👐";

console.log(Infinite);  // 👐

선언문 전에 출력해도 에러가 나지않고 undefined을 반환한다
선언문을 물리적으로 끌어올린 것이 아니고 환경레코드에 저장해두는 것.

• JS 엔진은 코드실행 전, 실행컨텍스트의 환경레코드에 모든 선언을 저장해둔다
  실행컨텍스트 - 코드 실행 전에 필요한 환경으로 코드를 구분하는 과정이다.
• 변수, 함수 등의 선언이 이미 저장됐기때문에 선언문 전에 호출해도 저장해둔 변수를 참조한다.

---

변수 생성 단계

1. 선언 단계 (Declaration phase)

• 실행 컨텍스트 call stack에 변수를 등록
  스코프가 변수 객체를 참조한다

{ Infinite }

2. 초기화 단계 (Initialization phase)

• 실행 컨텍스트 call stack에 변수는 undefined로 초기화 설정

{ Infinite : undefined }

3. 할당 단계 (Assignment phase)

• undefined으로 초기화된 변수에 실제 값을 할당

{ Infinite : "👐" }

---

Vaiable Hoisting

1. var

• 호이스팅 O
• 선언 단계 + 초기화 단계가 동시에 진행된다
  그래서 선언 전에 변수 호출해도 변수를 참조할 수 있다

{ Infinite : undefined }

2. let, const

• 호이스팅 X ?
  선언단계에서 실행컨텍스트에 변수 등록은 됐지만, 값이 할당안되서 ReferenceError가 발생하는 것이다.
  따라서 호이스팅은 됐지만 참조할 메모리가 없기때문에 접근할 수가 없어서 호이스팅이 안되는 것처럼 보이는 것이다.

• 선언 단계 / 초기화 단계가 분리되어 있다
  초기화단계는 선언문 이후에 이뤄진다. 초기화 전에는 변수를 참조할 수 없어서 참조 에러가 발생한다
  이로 인해 일시적 사각지대(TDZ) 문제가 발생한다

{ Infinite } // 할당문 전까진 값을 읽어올 수 없음

TDZ Temproal Dead Zone 일시적 사각지대

• let, const로 선언 시, 선언문 전에 식별자를 참조할 수 없는 구역

// TDZ구역) 선언문 전에 변수를 참조할 수 없음
console.log(Infinite); // Reference Error

// 선언문 - 초기화 단계 실행
const Infinite;
console.log(Infinite); // undefined

// 할당문 - 할당 단계 실행
Infinite = "👐";
console.log(Infinite);  // "👐"

---

Function Hoisting

1. Function Expression 함수표현식

호이스팅 안됨?
= 호이스팅은 됐지만, 초기화된 참조값이 없어서 TypeError가 발생한다

• 선언 단계 / 할당 단계 분리됨

foo();  // hello
foo2(); // TypeError: foo2 is not a function

function foo() {         // 함수선언문 - 호이스팅 O
  console.log("hello");
}
var foo2 = function() {  // 함수표현식 - 호이스팅 X
  console.log("hello2");
}

2. Function Declaration 함수선언식

호이스팅 됨

• 선언 + 초기화 + 할당 단계가 동시에 진행된다
• "호이스팅으로 인한 side effect를 줄이기 위해 함수표현식을 써라" - 더글라스 크라포드

참조

[10분 테코톡] 💙 하루의 실행 컨텍스트

https://poiemaweb.com/js-data-type-variable#24-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85variable-hoisting

[JS] 호이스팅과 TDZ (Temporal Dead Zone) - let도 호이스팅이 된다!