0.내가 알던 호이스팅

나는 호이스팅을 좀 덜엄밀하더라도 에러안나게 하려고 만들어놨다고 생각하고 있었다.
예를들어 변수를 나중에 선언해도 그 변수를 사용하는 문맥은 실행이 된다.
하지만 돌아만 가는코드일 뿐이고 나중에 문제가 생기면 디버깅이 힘들어진다.
이렇게..

1.MDN의 설명

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간
을 선언 전에 미리 할당하는 것을 의미합니다.

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면
let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상
단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코
드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코
드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.

JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당합니
다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있습니다. 예를
들어,

1) function, var

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}
catName("호랑이"); // 잘 동작함

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

function이나 var 둘다 이렇게 선언부터 메모리에 먼저 올라가서 동작한다.

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

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

위와같이 선언을 안하고 쓰면 호이스팅이 동작하지 않아 오류가 난다.

근데 요즘 누가 function, var를 쓰는가 아무도 안쓴다.
더 실질적인 호이스팅 예를 들어보자

MDN에 있는 호이스팅 유형은 세가지가 있는데 1번은

function, function async function, async function

이렇게 네가지이고
방금 본 var, function이 2번이고
이제 볼 let, const, class가 3번이다

2) let, const, class

이건 호이스팅으로 보지 않는 경우가 더 많다고 한다
왜냐하면 위 셋은 TDZ(일시적으로 죽는 구역?)의 적용을 받기때문이다
TDZ - 선언하기 전에 변수를 사용하는것을 엄격하게 금지하는 규칙
(function, var는 적용이 안되고 let, const class는 적용된다)

근데도 let const class가 호이스팅이 된다는 증거는

const x = 1;
{
  console.log(x); // ReferenceError
  const x = 2;
}

이 코드에서 찾아볼 수 있다고 한다.

const x = 2가 전혀 호이스트 되지않으면
console.log(x)는 상위범위에서 x를 읽을 수 있어야 하는데
const는 정의된 전체범위를 오염시키기 때문에
아래의 x를 읽으려 시도해서 레퍼런스 에러가 나게 되는것이다.

2.결론

보통 호이스팅을 얘기하는 이유는 function과 var가 아래에 있어도 잘 동작하는 코드들을 설명하기 위해서라고 생각한다.

그러므로 2)는 몰라도 1)은 확실히 이해하고 넘어가자

toast ui temporal dead zone
https://ui.toast.com/weekly-pick/ko_20191014
mdn hoisting
https://developer.mozilla.org/ko/docs/Glossary/Hoisting