let, const 개념 및 차이

기존 자바스크립트에서의 변수 선언은 var를 이용하는 방법뿐이였다.

ES6 문법에서 let, const를 이용한 변수 선업방법이 새로 생겼는데, 어떻게 사용되는지 간단히 정리해 본다. 

 let, const (Block-level scope)

let과 const를 이용하여 변수를 선언했을 경우, 유효범위는 블록 단위가 된다.

아래의 코드를 보면 바로 알 수 있을 것이다.

function func() {
  let foo = 5;
  if (···) {
     let foo = 10; 
     console.log(foo);     // 10
  }
  console.log(foo);      // 5
}

그럼 이번에는 블록안에서 다시 선언을 하지 않을 경우를 확인해 보자.

function func() {
  let foo = 5;
  console.log(foo);      // 5
  if (···) {
    console.log(foo);     // 5
    foo = 10; 
    console.log(foo);     // 10
  }
  console.log(foo);       // 10
}

 let, const 차이

일반적으로 기본형(String, Number, Boolean, Null, Undefined)에 대해서 let은 값의 변경이 있을 경우, const는 상수를 선언할 때 사용된다.

하지만 참조형(Array, Object, Function)을 선언하는 경우에는 const를 사용하는 것이 바람직하다.

참조형은 const로 선언해도 조작이 가능하다.

- 선언한 값을 참조하여 사용하는 예제

const foo = [0, 1];
const bar = foo;
 
foo.push(2);
bar[0] = 3;
 
console.log(foo, bar)
// [3, 1, 2] [3, 1, 2]

- 선언한 값을 복사하여 사용하는 예제

배열은 전개 연산자(spread operator), 객체는 assign() 함수 사용.

const arr = [0, 1];
const obj = {foo: 'bar'};
 
const newArr = [...arg];
const newObj = Ojbect.assign({}, obj);
 
newArr[0] = 3;
newObj.foo = 'bar2';
 
console.log(arr, obj);
// [0, 1], {foo: 'bar'}
 
console.log(newArg, newObj);
// [3, 1], {foo: 'bar2'}

 참고 자료

var, let 그리고 const

ES2015와 React