ECMAScript (ES6) const, let

먼저 ECMAScript란

자바스크립트의 결점을 보완하기 위해 ECMA라는 단체에서 결점을 보완한 표준 자바스크립트입니다!

 

ECMAScript도 자바스크립트라고 봐도 무방합니다ㅎㅎ 

ES6는 2015년에 결점을 보완하고자 나온 자바스크립트 버전으로 const와 let부터 얘기해보겠습니다. 

 

 

 

var VS const와 let 

자바스크립트에는 변수를 선언할 때 var뿐이었는데 const와 let이 추가됐습니다.

 

var과의 가장 큰 차이점은 const와 let은 해당 블록에서만 접근할 수 있는 블록스코프를 따르고,

var은 함수스코프라서 블록과 상관없이 접근할 수 있습니다. 

 

if (true) {
  var x = 3;
}
console.log(x); // 3

if (true) {
  const y = 3;
}
console.log(y); //error: y is not defined

const를 사용하여 변수를 정의한 경우 해당 블록 밖에서 변수를 불러오려고 하는 경우 정의되어 있지 않다는 것을 알 수 있습니다. 

 

 

var을 사용하였을 경우에는 변수를 선언한 곳보다 더 위에서 변수에 접근하려고 하는 경우가 있었는데 그런 경우 에러가 나지 않는 현상이 있습니다. 

const와 let은 선언한 곳보다 위에서 접근하는 것을 막아줍니다. 

(function() {
  console.log(x);
  var x = 10;
})(); // undefined;

(() => {
  console.log(z);
  const z = 10;
})(); // Uncaught ReferenceError: z is not defined

 

 

const와 let의 차이 

const = 한번 초기화하면 다른 값으로 변경 불가 

let = 변경 가능 (var) 

 

const a = 100;
a = 101; // Uncaught TypeError: Assignment to constant variable.
let b = 100;
b = 101; // 101

 

const 주의 

const는 초기화된 값을 변경할 수 없지만 const에 할당된 객체나 배열의 요소를 바꾸는 것은 막지 않습니다!!

  = 을 통해 변수 값이 설정된 경우에만 변경 불가능합니다. 

const a = 100;
a = 101; // Uncaught TypeError: Assignment to constant variable.
const c = [1, 2, 3];
c[0] = 4;
c; // [4, 2, 3]
const d = {name: 'Zero'};
d.name = 'One';
d; // {name: 'One'}