호이스팅(Hoisting)이란?

Hoisting : 'hoist(끌어올리다)' + 'ing' 의 합성어
변수의 선언과 초기화를 분리한 후, 선언만 최상단으로 옮기는 것(처럼 보이는 것)
인터프리터가 변수와 함수의 "메모리 공간을 미리 할당하는 것"을 의미함

원래 자바스크립트에서 함수를 호출 하려면, 함수가 선언 되어야 나와야 하는게 맞음
근데 아래처럼 함수를 먼저 호출하고 뒤에 선언해도 잘나옴

//함수선언 호이스팅 예시 호잇호잇
heyLady("또롱");

function heyLady(name) {
  console.log("갱얼쥐 이름은" + name + "입니다");
}

// 갱얼쥐 이름은 또롱입니다.

함수뿐만 아니라 자료형이나 변수에서도 확인할 수 있음

//변수선언 호이스팅 예시 호잇~~~
console.log(num); // var는 undefined로 출력함 -> 에러 안남
var num; // 선언
num = 6; // 초기화

--------------------

console.log(num2); // 선언 된 상태, 초기화 안되서 참조 불가능 -> 에러남
let num2; // 초기화

그런데 let, const, class은 호이스팅이 발생하지 않는 것처럼 동작함. 띠로리~
이는 변수 생성에 따라 호이스팅이 다르게 보인다고 설명할 수 있음 (호이스팅이 안 일어난다는게 아님)

변수 생성

변수 생성엔 총 3단계가 있음 '1단계 선언단계', '2단계 초기화단계', '3단계 할당단계'

var 는 1단계/2단계 한번에 이루어짐. 선언하고 바로 Undeined로 초기화함. 그래서 이미 스코프에 변수가 존재하기 때문에 에러가 발생하지 않음
그러나 let은? 선언할 때 스코프에 등록해두지만, 실제로 실행되는건 코드 실행후임 그래서 초기화단계 이전에 접근하려고 하면 에러가 발생함

때문에 let, const를 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생함
이런걸 스코프의 시작에서 변수의 선언까지 *일시적 사각지대(Temporal Dead Zone; TDZ)에 빠진다고함

작성중입니다 베이비

✏️ 참조
mozilla.org
hanamon.kr