개인적으로 공부하면서 블로그를 작성하고 있으므로 내용이 정확하지 않을 수 있습니다.
잘못된 부분은 지적해주시면 개발자로서 성장하는데 많은 도움이 될 것 같습니다. 😀

var

ES5 까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 방법이였지만 var 키워드로 선언된 변수는 아래와 같은 특징이 존재한다.

함수 레벨 스코프

함수 내에서 선언한 변수는 함수 내에서만 유효하고 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

변수 중복 선언 가능

자바스크립트는 var 키워드로 같은 이름을 가진 변수를 중복해서 선언이 가능하다. 유효 범위(함수 레벨 스코프) 상단에 같은 이름의 변수를 선언했던 것을 인지하지 못하고 다시 중복 선언하면 의도한 방향과 다르게 코드가 작동하지 않을 수 있을뿐더러 복잡성도 상당히 증가하므로 지양하는게 좋다.

호이스팅

변수 호이스팅은 변수를 선언하기 이전에 해당 변수 참조가 가능한 상황을 이야기한다. 왜 호이스팅이 일어나는지 간단하게 설명하기 위해서 아래 함수 실행 컨텍스트에 변수가 등록되는 과정을 간단하게 요약하여 설명한다.

1. 함수가 호출되면 자바스크립트 엔진은 실행 컨텍스트를 생성한다.
2. 실행 컨텍스트를 생성할 때 자바스크립트 엔진은 함수 내부의 변수 선언문들을 실행 컨텍스트에 등록하고 undefined로 초기화한다.
3. 코드가 한 줄씩 실행되면서 변수 선언문을 만나면 실행 컨텍스트에 undefined로 초기화가 되어있던 변수에 값을 할당한다.

선언문 위에서 변수를 참조했을 때 어떻게 참조가 가능할까? 라는 생각을 해봤을 때 실행 컨텍스트를 이해하고 있다면 더 확실히 이해가 될 것이다.

console.log(val); // val변수가 undefined로 초기화가 되어있는 상태
var val = 'val';  // val변수에 값 할당
console.log(val); // val변수에 값이 할당되었으므로 'val' 출력

선언문 위에서 val 변수를 만났을 때 실행 컨텍스트의 내부에서 val 변수는 undefined로 초기화가 되어있기 때문에 에러가 발생하지 않고 undefined가 출력되는 것을 확인할 수 있다.

let

블록 레벨 스코프

모든 코드 블록(for, while 등)의 내부에 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

변수 중복 선언 불가능

var 키워드는 같은 이름을 갖는 변수를 중복해서 선언이 가능하지만, let 키워드는 유효 범위 내에서 동일한 이름을 갖는 변수를 선언할 수 없다.

호이스팅

var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수는 선언문 이전에 참조가 불가능하다.

1. 함수가 호출되면 자바스크립트 엔진은 실행 컨텍스트를 생성한다.
2. 실행 컨텍스트를 생성할 때 자바스크립트 엔진은 함수 내부에 선언된 변수를 실행 컨텍스트에 등록한다.
3. 코드가 한 줄씩 실행되면서 변수 선언문을 만나면 undefined로 값을 초기화하고 값이 존재하면 값을 할당한다.

var 키워드에서는 자바스크립트 엔진이 변수 등록과 초기화 과정을 같이 진행했다면, let 키워드에서는 등록 과정만 거치기 때문에 메모리에 값이 없는 상태이다. 따라서 선언문 이전에 참조를 시도하면 에러가 발생한다.

값 재할당 가능

let 키워드로 유효 범위 내에서 변수 중복 선언은 불가능하지만 값 재할당은 가능하다.

const

const의 특징은 let과 대부분 동일하므로 다른 부분만 설명한다.

값 재할당 불가능

const는 반드시 선언과 동시에 할당이 이루어져야 하며 값 재할당이 불가능하다.

결론

변수 선언은 기본적으로 const를 사용하고 재할당이 필요한 경우에 let을 사용해서 재할당을 방지하는 것이 보다 안전하다.