var, let, const의 scope, 라이프 사이클

선언: 변수명을 자바스크립트 엔진에게 알리는 것
할당: 변수에 값을 저장하는 것 (= 할당 연산자를 사용)

재할당, 재선언

1. var: 재할당 O, 재선언 O 인 변수를 선언하기 위한 키워드
2. let: 재할당 X, 재선언 O 인 변수를 선언하기 위한 키워드
3. const: 재할당 X, 재선언 X 인 상수를 선언하기 위한 키워드

Scope, 호이스팅, 라이프 사이클

1. 스코프 차이

var와 let으로 선언된 변수들은 스코프 범위가 다르다.

1. var: 블록 스코프 무시, 함수 스코프 따름 (화살표 함수 블록 스코프는 따름)
2. let: 블록 스코프, 함수 스포크 둘 다 따름
3. const: 블록 스코프, 함수 스포크 둘 다 따름 (재할당은 안됨)

1. var

for (var i = 0; i < 10; i++){
  console.log(i);
}

console.log("마지막 i: ", i); //✅ 10

2. let, const

for (let i = 0; i < 10; i++){
  console.log(i);
}
console.log("마지막 i: ", i); // 🚨 ReferenceError

2. 호이스팅 차이

호이스팅이란, 자바스크립트에서 변수 선언문을 스코프 최상단으로 끌어올려 수행하는 것이다.
이때 할당 과정은 수행되지 않고 undefined으로 값을 초기화 하여 변수가 있다는 것을 자각한다.
따라서 변수 선언문이 변수를 사용하는 실행문인 콘솔 아래 있어도 변수를 사용할 수 있다.

var

console.log(a); // ❌ undefined
var a = "test"

var = a 가 호이스팅되어 끌어올려지므로
콘솔에 a를 찍으면 a는 초기화 값인 undefined가 출력된다.

let, const

console.log(a); // 🚨 ReferenceError
let a = "test"

let으로 변수를 선언한 경우에도 호이스팅이 되었다. 그런데 왜 ReferenceError가 뜰까?
호이스팅은 var,let,const 모두 이루어진다!
그 이유는 변수의 라이프 사티클이 다르기 때문이다.

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

따라서 var, let, const 모두 변수를 끌어와 선언하는 호이스팅 (Hoisting)은 수행이 모두 되지만, undefined 라는 값으로 초기화 되지 않은 let 변수에 경우 ReferenceError를 띄우게 되는 것이다.

let, const는 선언문에 도달해야 초기화가 된다.
let, const는 변수 선언문 이전에 참조가 불가하다.
let, const는 TDZ 에 제약을 받는다.

TDZ란,
스코프의 시작점부터 초기화 시작점까지의 구간이다. (1단계 부터 2단계 사이)
변수가 존재하지만 값을 할당할 때까지 참조할 수 없는 지점을 의미한다.