1. 변수, 호이스팅, TDZ(Temporal Dead Zone)

1.변수

var

• var는 한번 선언된 변수를 다시 선언할 수 있지만 let은 불가능하다.
• var는 선언하기 전에 선언만(할당은 X) 호이스팅 되기에 사용할 수 있다.

console.log(name) // undeifiend
var name = 'kim'
// 왜냐면 아래와 같이 동작하기에
var name;
console.log(name) // undeifiend
name = 'kim'

• 같은 상황에서 let, const은 에러가 나는데 let, const *호이스팅 되지만 TDZ때문이다.
• TDZ 영역에 있는 변수들은 사용할 수 없는데 let, const 모두 TDZ의 영향을 받기에 할당 전엔 사용 할 수 없게 된다.
• TDZ로 인해 코드를 예측 가능하게 되고 잠재적 버그를 줄여준다.

*호이스팅
: 스코프 내부 어서든 변수 선언은 최상위에 선언된 것 처럼 행동

let age = 30;
function showAge() {
    console.log(age) // 여기 까진 ok
    let age = 20 // 여기서 error
}
showAge()

• 위코드에서 let 역시 호이스팅되지만 호이스팅은 스코프 단위, 해당 코드에선 함수 내부에서 일어나기에 age 변수가 호이스팅 되어 TDZ 존에 들어간다.

2. 변수 생성과정

변수는 3단계 생성 과정을 거친다

1. 선언 단계
2. 초기화 단계
3. 할당 단계

• var는 1. 선언 및 초기화가 동시에 일어나기에 할당 전 호출해도 에러 나지 않고 undefined가 찍힌다. 이후 2. 할당 단계를 거친다.
• let은 선언, 초기화, 할당 단계가 분리되어 진행되어 호이스팅 되면서 선언 단계는 이뤄지지만 선언 단계는 코드에 도달 했을 시 이뤄지기에 레퍼런스 에러가 발생한다.
• const는 상수이기 때문에 선언 및 초기화 할당이 동시에 이루어져야한다.

3. 스코프

var는 함수 스코프이고 let, const는 블록 스코프이다.

• 블록 스코프는 모든 코드 블록 내 선언된 변수는 코드 블록 내에서만 유효하며 외부에서 접근할 수 없다는 의미로 코드 블록 내부에 선언된 변수는 모두 지역 변수가 된다.
  - 코드블록은 function, if, for, while, try-catch 문 등
• 함수 스코프는 함수 내에서 선언된 변수만 지역 변수가 되는 것으로 var가 벗어날 수 없는 스코프가 함수라고 이해하면된다.