var

중복 선언 가능

var name = 'javascript';
console.log(name); // javascript

var name = 'react';
console.log(name); // react

• var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능함. 이와 같은 경우, 마지막에 할당된 값이 변수에 저장됨. 위의 예제를 보면 에러 없이 각기 다른 값이 출력되는 것을 볼 수 있음.
• 이는 필요할 때마다 변수를 유연하게 사용할 수 있다는 장점이 될 수도 있지만, 기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수가 발생할 가능성이 큼. 특히 코드량이 많아졌을 때, 같은 이름의 변수명이 여러 번 선언되었다면 어디 부분에서 문제가 발생하는지 파악하기 힘들뿐더러 값이 바뀔 우려가 있음.
• 이를 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let 과 const 임.

let

중복 선언 불가능, 재할당 가능

let name = 'javascript';
console.log(name); // javascript

let name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'vue';
console.log(name); // vue

• var 와 다르게 let 은 해당 변수가 이미 선언되었다는 에러 메시지가 출력됨. 이처럼 중복 선언이 불가능함.
• name = 'vue' 와 같이 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당 할 수는 있음.

const

중복 선언 불가능, 재할당 불가능

const name = 'javascript';
console.log(name); // javascript

const name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'vue';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

• let 과 const 의 차이점은 immutable 의 여부임. let 은 변수에 다른 값을 재할당할 수 있지만, const 는 재할당 시 에러 메시지가 출력됨.

• 새롭게 만든 변수에 기존에 존재하던 배열과 객체를 할당할 때, 같은 데이터를 가진 새로운 배열 또는 객체가 생성되는 것이 아닌 원본과 같은 참조를 가지게 됨.

• 그렇기 때문에 새로 만든 변수의 값을 변경하면 원본 데이터도 바뀌게 되며, 이 경우 원본 데이터가 훼손되지 않도록 유지하는 방법이 필요함. 위 예제와 같이 적용하면 기존 배열의 복사본이 생기는 것이기 때문에 원본에는 영향을 끼치지 않음.

• ES6의 spread operator 를 사용하면 손쉽게 immutable array 를 만들 수 있음.