[JavaScript] let, const 차이점은? (+ var와 호이스팅)

let 변수

1. let 이란?
   - 변수는, 변경 가능한 값을 저장하는 공간입니다.
   - 사용하기 전에 반드시 선언이 필요합니다.

2. let 선언과 동시에 할당 (가능)

let test = "안녕";

3. let 선 선언, 후 할당 (가능)

let test;
test = "안녕";

4. let 재할당 (가능)

test = "안녕하세요";

5. let 재선언 (불가능)

let test = "감사합니다"; // error 발생

6. let 복합할당연산자 (가능)

test += 1; // test = test + 1; 과 같다

const 상수

1. const 란?
   - 상수는, 변경 불가능한 값을 저장하는 공간입니다.
   - 사용하기 전에 반드시 선언이 필요합니다.

2. const 선언과 동시에 할당 (가능)

const test = "안녕";

3. const 선 선언, 후 할당 (불가능)

const test; // error 발생
test = "안녕"

4. const 재할당, 재선언, 복합할당연산자 (불가능)

5. const (with 배열, 객체)
   - const에 할당된 값이 불변값이 되지는 않습니다.
   - 변수를 재할당 할수는 없지만, 값을 바꿀 수는 있습니다.

// 배열
const test = [];
test[0] = 1;
test.length = 10;
console.log(test); // [ 1, <9 empty items> ]

// 객체
const me = {
  name: 'chloe',
  age: 18
};

me.age = 28;
console.log(me); // { name: 'chloe', age: 28 }

식별자와 리터럴

1. 식별자와 리터럴

const test = 0; // test가 식별자, 0이 정수리터럴

2. 식별자 가능
   - 문자열 (""은 제외하고 사용)
   - 기호 $ or _
   - 숫자 (>=0, 음수제외)

3. 식별자 불가능
   - 숫자로 시작
   - 예약어 (if, for 등)
   - $와 _를 제외한 기호
   - 공백 (띄어쓰기)

4. 한줄에 여러개의 변수 선언 (가능 여부)

// let 선언과 동시에 할당 (가능)
let first = 1, second = 2, third = 3;

// let 선 선언, 후 할당 (가능)
let first, second, third;
first = 1, second = 2, third = 3;

// const 선언과 동시에 할당 (가능)
const first = 1, second = 2, third = 3;

// const 선 선언, 후 할당 (불가능)
// const first, second, third; // error 발생

호이스팅

1. var
   var로 선언된 변수가 범위 내에 존재한다면, 해당 변수를 범위내 최상단으로 끌어올립니다. 그렇기 때문에, 외부 범위에서 해당 변수에 접근이 가능해집니다.
   var는 변수의 중복 선언이 가능합니다. 그렇기 때문에, 예상한 값과 다른 값이 나올 확률이 높아집니다.
   변수에 값을 할당하기 전에 호출을 하면, undefined가 호출되는 현상을 호이스팅이라고 합니다.

function test() { // 함수단위
  // 결과값은 항상 undefined
  console.log(A); // B, C를 출력하면 error 발생
  var A = 'var'
  let B = 'let'
  const C = 'const'
};

test();

2. 호이스팅
   인터프리터(코드를 한 줄씩 읽어 내려가며 실행하는 프로그램)가, 변수와 함수의 메모리 공간을, 선언 전에 미리 할당하는 것을 호이스팅이라고 합니다.
   var로 선언한 변수의 경우, 호이스팅 시 undefined로 변수를 초기화 합니다.
   반면, let과 const로 선언한 변수의 경우, 호이스팅 시 변수를 초기화하지 않습니다.
   Temporal Dead Zone이라고 불리우는 선언 ~ 초기화 단계의 구간에서,
   let, const는 선언과 초기화 단계가 분리되어서 진행되어, 호이스팅 시 실행 컨텍스트에 변수가 등록된 상태이지만, 메모리 할당이 되지않아 참조에러가 발생합니다.
   var는 선언과 초기화 단계가 동시에 진행되어, 호이스팅 시 실행 컨텍스트에 변수가 등록되고 메모리에 undefined로 초기화된 상태라, undefined가 출력됩니다.