let, const

var 로 선언한 변수의 문제점

• 변수 중복 선언 허용 => 먼저 선언된 변수 값이 의도치 않게 변경될 수 있음
• 함수 레벨 스코프 => 함수 외부에서 선언 시 전역 변수가 되므로 전역 변수를 남발할 가능성↑
• 변수 호이스팅 => 변수 선언문 이전에 참조 가능하므로 프로그램의 흐름과 맞지 않고 가독성이 떨어짐
  
  

---

let

• 변수 중복 선언 금지 => SyntaxError 발생
• 블록 레벨 스코프
• 전역 객체의 프로퍼티가 아님 (window.변수명 으로 접근 불가)
• 선언 단계와 초기화 단계 분리되어 진행 => 선언문 이전에 참조 불가
  (런타임 이전에 선언 단계 실행, 변수 선언문에서 초기화 단계 실행, 할당문에서 할당 단계 실행)

일시적 사각지대 (TDZ: Temporal Dead Zone)

스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간

// 런타임 이전 - 선언 단계 실행, 아직 초기화 X => 참조 불가 (TDZ)
console.log(foo); // ReferenceError: foo is not defined

let foo; // 선언문 - 초기화 단계
console.log(foo); // undefined

foo = 1; // 할당문 - 할당
console.log(foo); // 1

let 으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보이지만 그렇지 않다.

let foo = 1;

{
  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
  let foo = 2;
}

만약 호이스팅이 발생하지 않는다면 위 예제는 전역 변수 foo의 값을 출력해야 한다. 현재 스코프 내에 선언된 foo가 없으므로 상위 스코프의 foo를 찾아내 출력해야하기 때문이다. 그러나 호이스팅이 일어난 상태이므로, 선언은 되어있지만 초기화가 되지 않아서 참조할 수 없다는 에러가 발생한다.

---

const

• 반드시 선언과 동시에 초기화해야함
• 블록 레벨 스코프
• 재할당 금지 (var, let은 가능) => 상수 표현을 위해 많이 사용
• 원시값 할당한 경우 값 변경 불가, 객체 할당한 경우 변경 가능

// 변수명 대문자로 선언해 상수임을 명시함
const TAX_RATE = 0.1;

let preTaxPrice = 100;

let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE); // 110

const person = {
  name: 'Lee'
};

// 객체는 변경 가능한 값 => 재할당 없이 변경 가능
person.name = 'Kim';

---

var / let / const

• ES6를 사용한다면 var 는 사용 X
• 기본적인 변수 선언은 const 사용
• 재할당이 필요한 경우 let 사용 (변수의 스코프는 최대한 좁게)