const, let

• ES6 이전의 변수 선언시에 var를 이용해 선언을 했다. ES6에서 새로 추가된 const 와 let을 알아보며, 기존의 var과의 차이점을 알아보자.

• 현재까지 발표된 버전은 ES10이다. (2020.06)

• 우선, var과의 가장 큰 차이점은 Scope 이다. var은 함수스코프이고, const와let은 블록스코프이다.

• 함수스코프의 경우 함수내의 어느곳에서 호출해도 접근이 가능하지만, 블록스코프의 경우 블록내에서만 호출이 가능하며, 해당 블록이 아닌곳 에서는 호출이 불가능하다.

• 예로, if문 내에서 사용한 var 변수는 if문 외부에서도 호출이 가능하지만, const와let은 불가능하다.

if (true) {
  var num = 5
}
console.log(num) // 5

if (true) {
  const num = 5
}
console.log(num) // Uncaught ReferenceError: i is not defined

if (true) {
  let num = 5
}
console.log(num) // Uncaught ReferenceError: i is not defined

• var에는 아래와 같은 문제가 존재 한다.

var str1 = 'AAA'
var str2 = 'BBB' // 이미 생성된 변수명으로 재선언 했으나, 아무런 문제가 발생하지 않는다.
str3 = 'CCC'
var str3 // hoisting으로 인해 ReferenceError에러가 나지 않는다.

console.log(str3) // CCC

• const와let은 var과 다르게 변수 재선언이 불가능하다.
  const와let의 차이점은 변수의 재할당 여부이다.
  const는 재할당이 불가능하지만, let은 재할당이 가능하다.

let str = 'AAA'
let str = 'BBB' // 에러
str = 'CCC' // 정상

console.log(str) // CCC

const str = 'AAA'
const str = 'BBB' // 에러
str = 'CCC' // 에러

• const와let의 한가지 더 다른점은, let은 변수 선언 후에 값을 할당 해도 되지만, const는 변수 선언시 값을 할당 해야 한다.

let str
str = 'AAA' // 정상

const str; // 에러
str = "AAA"; // 에러

const str = "AAA"; // 정상

• 하지만, const는 새로운 값을 대입하는것을 막을뿐, 할당된 객체나 배열의 요소를 바꾸는것은 가능하다. 즉, 데이터의 주소값만 고정하는 것 이다.

const arr = [1, 2, 3]
arr[0] = 5
console.log(arr) // [5,2,3]

const obj = { id: 'java' }
obj.id = 'script'
console.log(obj) // {id: "script"}