let, const와 var

var 키워드로 선언한 변수의 문제점

• 변수 중복 선언 가능
• 함수의 코드 블록만을 지역 스코프로 인정
• 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 전역 변수가 됨
• 변수 호이스팅 발생

var x = 1;

if(true) {
  // x 는 전역변수로 선언이 되었으므로 코드 블록 내에서 선언하더라도 전역 변수가 됨
  // 따라서 변수 값이 의도치 않게 변경 됨
  x = 10;
}

console. log(x); // 10

console.log(foo); //undefined

// 변수에 값을 할당
foo = 123;

console.log(foo) // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행
var foo;

변수 호이스팅은 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다

let의 특징

• 변수 중복 선언 금지 : let 키워드로 변수를 중복 선언하면 문법 에러 발생
• 블록 레벨 스코프 : 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름
• 변수 호이스팅 발생하지 않는 것 처럼 동작

let foo = 1; // 전역 변수

{
  let foo = 2; // 지역 변수
  let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError

함수 내의 코드 블록은 함수 레벨 스코프에 중첩

// 런타임 이전에 선언 단계 실행, 아직 변수가 초기화 되지 않음
// 초기화 이전의 일시적 사각지대에서는 변수 참조 불가
console.log(foo); //undefined

foo = 1; // 할당문에서 할당 단계 실행
console.log(foo); // 1
}

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

하지만 let 키워드로 선언한 변수도 여전히 호이스팅이 발생
자바스크립트는 ES6에서 도입된 let const를 포함한 모든 선언을 호이스팅하기 때문

var과 let의 전역객체

• var 키워드로 선언한 전역 변수와 전역 함수, 암묵적 전역은 전역 객체 window의 프로퍼티가 됨
• let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니므로 전역 객체에 접근 불가 / let의 전역 변수는 보이지 않는 개념적인 블록 내에 존재

const : 상수를 선언하기 위해 사용 (재할당이 금지된 변수)

• const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동작함
• const 키워드로 선언된 변수에 원시 값을 할당한 경우 원시 값은 변경할 수 없는 값이고 const 키워드에 의해 재할당이 금지되므로 할당된 값을 변경할 수 없음
• const 키워드로 선언된 변수에 객체를 할당한 경우에는 값을 변경할 수 있음

var vs let vs const

• ES6 사용 시 var는 사용하지 않는다
• 재할당이 필요한 경우 let을 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않고 읽기 전용 원시 값과 객체는 const를 사용한다.

일단 선언 후 재할당이 필요하다면 let으로 변경