var, let, const

이 3개의 단어는 모두 변수를 선언할 때 사용합니다.
3개 모두 자료형의 구분 없이 모든 형식을 넣을 수 있습니다.

scope

변수(식별자)에 대한 유효범위

function-scope

함수 내에서 선언된 변수로 함수 내에서만 유효한 스코프입니다. 함수 외부에서는 참조 할 수 없습니다.
함수 내부에서 선언된 변수는 지역 변수
함수 외부에서 선언된 변수는 전역 변수

ex_1)

var el = 123; // 전역 변수

console.log(el); // 123

{
  var el = 123; // 전역 변수
}

console.log(el); // 123

ex_2)

var i = 10; // 전역변수

(function () {
  var j = 20; // 지역변수 
})();

console.log(i); // 10
console.log(j); // "j" in not defined

block-scope

블록 {...} 내에서 유효한 스코프를 의미합니다. 접근 할수 있다는 뜻입니다. 블록 외부에서는 참조 할 수 없습니다.
ex)

let el = 123; // 전역 변수

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

console.log(el); // 123
console.log(foo); // 참조에러발생

var

function-scope
변수 재선언 가능

var el = '첫번째 변수';
console.log(el); // 첫번째 변수

var el = '두번째 변수';
conosle.log(el); // 두번째 변수

변수 선언을 여러 번 해도 문제없이 각각 다른 값이 출력됩니다.
필요할 때 마다 변수를 사용할 수 있는 장점이 될 수 있지만 코드가 길어질 경우 해당 변수가 어디에서 어떻게 사용 되는지 파악하기 힘들며 의도치 않게 값이 바뀔 우려가 있습니다.
이 단점을 보완하기 위해 ES6 부터 let, const가 추가되었습니다.

let

block-scope
변수 재선언 불가능 , 변수 재할당 가능

let el = '첫번째 변수';
console.log(el); // 첫번째 변수

el = '두번째 변수'
conosle.log(el);
// Uncaught SyntaxError: Identifier 'el' has already been declared

let el = '새로운 변수';
console.log(el) // 새로운 변수

const

block-scope
변수 재선언 불가능, 변수 재할당 불가능

const el = '첫번째 변수';
console.log(el); // 첫번째 변수

el = '두번째 변수';
console.log(el); // 에러발생

const el = '새로운 변수";
console.log(el); // 에러발생

var , let , const의 차이점

• var 변수는 선언 전에 사용해도 에러가 없지만 let, const는 에러가 발생함
• var, let 변수는 선언시 초기 값을 주지 않아도 되지만 const는 반드시 값을 할당해야함

결론

재할당이 필요없다면 const , 재할당이 필요하다면 let
이렇게 사용하는 것이 가장 좋습니다.