차이를 보기전에 함수 레벨 스코프와 블록 레벨 스코프를 알아야 될것 같음. (스코프 = 범위)

• 함수 레벨 스코프
  • 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
• 블록 레벨 스코프
  • 모든 코드 블록(함수, if, for, while, try등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 코드 블록 외부에서는 참조 수 없음. 즉, 코드 블록에서 선언한 변수는 지역변수이다.

var

기존 var변수는 함수 레벨 스코프였고,
중복 선언이 가능한 점과 for문안에서 선언한 변수를 밖에서 사용할 수 있으며,
변수를 선언하기전에 참조 할 수 있는 특징이 있다.

//함수 레벨 스코프 예시
for (var i = 0; i < 4; i++) {
  console.log("i = ", i); //0,1,2,3
}
console.log(i); // 4

// 중복 선언 허용
var temp = 1;
var temp = 2;  // 중복 선언 허용

//호이스팅 
console.log(temp); // undefined 출력 (다른 언어와 let은 오류가 뜸)
var temp;

let

다른언어와 마찬가지로 블록 레벨 스코프를 지원함.

let foo = 123; // 전역 변수

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

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

var 키워드로는 동일한 이름을 갖는 변수를 중복해서 선언할 수 있었다.
하지만 let 키워드로는 동일한 이름을 갖는 변수를 중복 선언 하는 것을 금지한다.

var foo = 123;
var foo = 456;  // 중복 선언 허용

let bar = 123;
let bar = 456;  // Uncaught SyntaxError: Identifier 'bar' has already been declared

let키워드는 선언문 이전에 참조하면 참조 에러가 발생한다.

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

const

const는 let의 특성을 가지고 있으면서, 재할당이 금지된다.

const temp = 1;
temp = 2; // TypeError: Assignment to constant variable.

또한, const는 반드시 선언과 동시 할당이 이루어져야 한다.

재할당이 금지되지만, 객체의 프로퍼티는 보호되지 않는다.

const user = { name: "Lee" };
user.name = "Kim"; 
console.log(user); //{ name: 'Kim' }

😵‍💫 그래서 뭘 써야 하는데?

기본적으로 const를 사용하고, let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다.
일단 const로 적고, 나중에 재할당이 필요하면 let으로 변경하자.