코딩의기술 1.1 const로 변하지 않는 값을 표현하라

1장 변수 할당으로 의도를 표현하라

TIP1. const로 변하지 않는 값을 표현하라

 

1. 과거의 변수 할당 법

var 오직 하나.

var a;
a = 1;

var b = 3

console.log(a)  // 1
console.log(b)  // 3

a = 50
console.log(a)  // 50

 

2. ECMAScript 6 (ECMAScript 2015)

ECMAScript는 자바스크립트를 위한 공식적인 기술 명세이다. ECMAScript6는 2015년도에 나온 ECMAScript 표준의 가장 최신 버전으로 ES6로 줄여서 부른다. ES6 에서는 기존의 변수 할당법인 var 이외에도 2개의 추가적인 변수할당법이 추가 되었다. 바로 let과 const이다.

 

이중에서도 const는 블록의 문맥 내에서 재할당할 수 없는 변수 선언이다. 즉 한 번 선언하면 변경할 수 없다. 자바스크립트에서는 재할당할 수 없는 const를 기본으로 선택하면 좋다.

 

 

3. const를 사용하는 이유

- 값을 할당한다는 것은 무엇을 정보로 할지에 대한 신호를 보내는 것이기도 하다. 다른 개발자에게 코드를 훑어볼 때 해당 변수를 신경쓰지 않아도 된다고 알려줄 수 있다.

 

다음 두 프로그램을 생각해보자. 첫 번째 프로그램은 const를 사용하고, 두 번째 프로그램은 var를 사용했다.

const taxRate = 0.1;
const total = 100 + (100 * taxRate);
...
// 100행의 코드를 건너뛰었습니다.
...
return `구매 금액은 ${total}입니다.`;


var taxRate = 0.1;
var total = 100 + (100 * taxRate);
...
// 100행의 코드를 건너뛰었습니다.
...
return `구매 금액은 ${total}입니다.`;

두 코드는 유사해 보이지만 첫 번째 코드가 훨씬 이해하기 쉽다. const를 사용한 경우 중간의 100행의 코드를 신경쓰지 않고 구매금액이 110 이라는 것을 알 수 있다. const를 사용한 total은 상수이며 재할당할 수 없다는 것을 알고 있기 때문이다.

 

하지만, var를 사용한 경우 100줄의 코드를 살펴보면서 변경된적 없는지를 확인해보아야 한다. 반복문, 조건문 내에서 재할당이 되었을지, 배송비가 추가되었을지 직접 찾아보기 전까지는 total 값을 알 수 없다.

 

const taxRate = 0.1;
const shipping = 5.00;
let total = 100 + (100 * taxRate) + shipping;
...
// 100행의 코드를 건너뛰었습니다.
...
return `구매 금액은 ${total}입니다.`;

위 코드에서 taxRate와 shipping이 변하지 않는다는 점을 알려줬지만, total은 계속 유지되는 값이 아니기에 total 값을 믿을 수 없다. 가장 좋은 것은 할당이 변경되지 않는다는 점을 알 수 있는 경우이다. 두 번째로 좋은 것은 변경될 수도 있다는 점을 알 수 있는 경우이다. const를 자주 사용하고 let은 드물게 사용하면 변경되는 부분을 예측할 수 있다.

 

4. const를 사용할 때 고려사항

const에 할당된값이 불변값이 되지는 않는다. 즉, 변수를 재할당할 수는 없지만, 값을 바꿀수는 있다.

const discountable = [];
...
// 코드를 몇 행 건너뛰었습니다.
...
for (let i = 0; i < cart.length; i++) {
  if (cart[i].discountAvailable) {
    discountable.push(cart[i]);
  }
}

discountable을 const로 선언했지만 여전히 배열에 항목을 추가할 수 있다. 객체, 배열, 또는 다른 형태의 컬렉션에 대해서는 좀 더 까다롭게 살펴봐야 한다. 무엇을 사용해야 할지 정해진 것은 없지만, 될 수 있으면 조작을 피하는 것이 최선이다.

 

위 예제를 조작하지 않고 작성하면 다음과 같다.

const discountable = cart.filter(item => item.discountAvailable);

 

정리

- 일단은 const를 기본으로 사용할 것!

- 코드가 변경되어 더 이상 const의 사용이 적절하지 않은 때가 오면 다른 선언 방법을 사용하면 된다.

- 다음 팁에서 const가 적절하지 않을 때, let을 사용해야 하는 경우를 알아보자.