ES6 이전의 자바스크립트에서 변수를 선언할대는 var을 이용했다.
ES6부터 등장한 변수 선언 키워드 let, const의 차이점을 정리해보자.

var

1. Hoisting

변수선언 및 초기화 단계를 최상단으로 끌어 올린다.

console.log(apple) // => undefined, 함수의 선언 및 초기화가 호이스팅에의해 최상위로 끌어올려짐

var apple ="red"

2. 함수 레벨 스코프

자바스크립트에서 코드 블럭(if, for, while, try/catch 등)은 지역 스코프를 만든다. 하지만 var를 사용해 선언된 변수는 오직 함수 레벨 스코프만 지역 변수로 인정하며 이외의 코드블럭에선 전역스코프를 따라 전역변수로 취급된다.

var fruit = 'apple';

function func() {
  var fruit = 'banana';
  return fruit;
}

console.log(func()); // => banana
console.log(fruit); // => apple

if (true) {
  var fruit = 'peach'; //var는 if를 지역스코프로 보지 않기때문에 전역변수가 선언된다.
}

console.log(fruit); // => peach
 

3. 중복선언과 재할당

var fruit = 'apple'

var fruit = 'banana'
console.log(fruit) //=> banana

fruit = peach
console.log(fruit) //=> peach

let, const

*let, const도 hoisting이 일어난다고한다!

1. let, const의 scope

모든 코드 블럭(if, for, while, try/catch 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let apple = 'red'

if (true) {
let apple = 'sweet'
console.log(apple) //=> sweet
}

console.log(apple) //=> red

2. let의 선언, 할당

let은 중복선언이 불가하며, 재할당은 가능하다.

let apple;  //=> undefined, 변수 선언후 초기화가 진행된다. 선언과 할당을 동시에 해도 된다.
apple = 'sweet' // 값을 재할당 할 수 있다.
let apple = 'tree' //=> SyntaxError: Identifier 'a' has already been declared

3. const의 선언, 할당

const를 사용한 변수는 중목선언이 불가능하며, 재할당도 불가능하다.
예외로 객체(배열포함)는 주소값이 적장되어 있기때문에 객체내의 값들은 추가 삭제가 가능하다.
또한 let과 다르게 선언과 할당이 동시에 이루어저야한다.

const banana; // SyntaxError: Missing initializer in const declaration

const apple = 'red'
apple = 'sweet' // TypeError: Assignment to constant variable.

const arr = [1, 2]
arr = [1, 2, 3, 4] //TypeError: Assignment to constant variable. 재할당은 불가능!!

arr.push(3, 4) //배열의 주소값이 그대로일경우 수정가능

console.log(arr) //=> [1, 2, 3, 4]