호이스팅, TDZ란?

var

• 한번 선언된 변수를 다시 선언할 수 있음
  ex: var cat = cute
  console.log(cat) // cute

var cat = pretty
console.log(cat) = pretty

• var는 선언하기 전에 사용할 수 있음

console.log(catName) // undefined

carName = 'Rey';

-> catName을 선언하기 전에 콘솔을 찍었는데 에러가 아니라 undefined이 나왔다 왜일까?

var catName;

console.log(catName); // undefined

catName = 'Rey';

console.log(catName); // Rey

여기서 호이스팅이라는 개념이 나온다
즉 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것이 호이스팅이다
그렇다고 진짜 변수 선언을 최상단에 둔다는게 아니라 자바스크립트가 코드를
위에서 아래로 읽어나가면서 변수 등의 정보를 환경레코드(Environment record, 식별자와 식별자에 바인딩된 값을 기록해두는 객체)에 기록해놓기 때문임

위의 예시에서 catName이라는 변수 선언은 호이스팅되고 'Rey'라는 할당된 값은 호이스팅이 되지 않기 때문에 두 번째 줄에서 undefined가 나오는 것이다

같은 경우 let와 const는 에러가 뜬다
그렇다면 let과 const는 호이스팅되지 않는 것일까? 아니다 !
let과 const는 TDZ의 영향을 받기 때문에 에러를 일으키는 것이다
그럼 TDZ란 뭘까?
선언 이전에 식별자를 참조할 수 없는 구역을 뜻한다

console.log(catName);        //TDZ
-------------------------

const catName = 'Ray' // 선언 및 할당
 
console.log(catName); // 사용가능 

TDZ안에 선언된 변수는 사용하지 못함
따라서 맨 윗줄은 사용불가능함

var를 사용시 선언과 초기화가 동시에 이루어짐

• 선언 : 메모리 공간을 확보하고 식별자와 연결
• 초기화 : 식별자에 암묵적으로 undefined 값 바인딩

let, const를 사용시 초기화를 하지 않음
따라서 할당문 직전까지는 값이 할당되지 않고 이렇게 되면 값을 읽어올 수 없기 때문에 TDZ가 생김 -> 에러

참고
https://youtu.be/EWfujNzSUmw
https://youtu.be/ocGc-AmWSnQ