var

1. var로 변수 선언 시 var 키워드 생략 가능

2. var로 변수 선언 후 중복 선언 가능

3. 변수가 선언도 되지 않았는데 참조 가능(변수 호이스팅)

변수 호이스팅?
변수가 생성되면 선언 -> 초기화 -> 할당 이 3단계에 걸쳐 생성된다.
이를 설명하면 scope에 변수를 등록 후 변수를 위한 공간을 확보한 후(선언), 변수를 undefined로 초기화를 한다. 그래서 위의 예제에서도 첫 번째 console.log에서 에러가 발생하지 않고 undefined가 출력 되었다. 그 후 할당문에 도달하여 값이 할당 되었을 때, 값이 정상적으로 출력되는 것을 볼 수 있다. 이러한 현상을 변수 호이스팅이라 한다.
여기서 var의 문제점은 변수 선언 시 (선언) -> (초기화)가 동시에 이루어지기에 변수 호이스팅으로 인한 문제가 발생하는 것이다.

4. function-level-scope

var는 함수 코드블록({})만 scope로 인정하기 때문에 함수 외부에서 선언된 모든 변수는 전역 변수이다.

let, const

위의 문제점들을 해결하고자 ES6에서 let, const의 출현!

1. block-level-scope

var 에서는 function-level-scope라서 전역 변수가 남발할 수 있는 사태가 발생!
하지만 let, const는 block-level-scope라서 전역변수를 남발하는 사태를 감소!

2. 변수 중복 선언 불가

var에서는 변수를 위에 선언 후 다시 아래에서 재 선언이 가능했었다!
하지만 let, const는 재 선언 시 문법 에러 발생!

3. 호이스팅 불가

위에서 설명한바와 같이 var로 변수 생성 시 선언과 초기화가 동시에 이루어지기 때문에 호이스팅 현상이 발생! 하지만 let, const는 변수 생성 시 선언과 초기화가 분리되어서 진행!
let, const는 변수를 생성하고 선언까지 한 후 일시적 사각지대(TDZ)가 선언과 초기화 사이에 생기며, 할당문에서 변수 값이 할당 될 때 초기화 및 값 할당이 이루어진다.

차이점

let으로 변수 선언 후 값을 재할당 가능!
const로 선언 후 값을 재할당 불가능!
값을 재할당 할 것 같으면 let을 사용, 변하지 않는 값에는 const(상수)를 사용!

정리

👍 ES6를 사용 가능하다면 var 대신 let, const를 사용하자!
👍 값을 재할당 한다면 let, 재할당을 안한다면 const를 사용하자!