const를 써라. let을 써야 할 것 같다고? 그럼 다시 한 번 생각해보고 const를 써라.

 

자바스크립트에서 변수를 선언하기 위해 사용하는 키워드는 세 가지가 있습니다.

var, const, let 요렇게 세 가지죠.

모던 자바스크립트 Deep Dive 의 책 내용에도 그렇고, 우리 주변 개발자들의 얘기를 들어봐도 var는 이제 쓰지 말라고 합니다.

그리고 let 보다는 가능하면 const를 쓰라고 합니다.

왜 그런걸까요?

 

var는 쓰지 마라

var는 구식 문법입니다. ES6 이전의 버전에서는 변수를 선언하는 방법이 var 밖에 없었기 때문에 var를 썼지만, 이제는 완벽한 상위 호환인 const, let이 있기 때문에 var 를 사용할 이유가 없습니다.

var가 발생시킬 수 있는 문제점들엔 어떤 것들이 있을까요?

 

우선 var는 변수를 중복으로 선언해도 에러가 발생하지 않습니다.

아래와 같은 상황이 발생할 수 있습니다.

 

// 앨범 가격을 반환하는 함수
function getAlbumPrice(price) {
  return Math.floor(price * (1 - discountRate));
}

var discountRate = 0.2;

// ...
// 코드가 엄청나게 길어지는 바람에, 백엔드 개발자 카리나는
// discountRate가 이미 선언한 전역 변수라는 사실을 까맣게 잊고 말았습니다.

var discountRate = 0.5;

// 배포가 이뤄진 다음 날, 개발 총괄 이수만 선생님이 길길이 날뛰며 카리나를 찾아왔습니다.
// "어떤 자식이 신규 앨범에 할인율 50%를 적용했어!!"

(var를 중복 선언했다는 사실과 별개로 위의 코드 자체가 정말 별로지만, 예시를 들기 위한 코드니 이해하고 넘어갑시다)

 

정말 무서운 상황이죠? const나 let을 쓰면 이런 문제를 애초에 방지할 수 있습니다.

저렇게 중복 선언하려고 하면 SyntaxError를 발생시키기 때문입니다.

아예 첫 실행 시점에서 에러가 발생해버리니, 문제를 조기에 식별할 수 있죠! (만약 ESLint를 쓴다면 IDE에서 아예 코드 편집할 때 에러를 내버리는 것도 가능합니다)

 

그리고 var 키워드는 함수 레벨 스코프만 지원하기 때문에, 블록이 중첩되어 있는 코드에서 변수를 잘못 사용하기 쉽습니다.

 

function getPrice(isMember) {
  const price = 10000;

  // isMember가 false인 경우, 아래 코드가 실행되지 않으므로
  // discountRate는 undefined로 남아있게 됩니다!
  if (isMember) {
    var discountRate = 0.1;
  }

  return price * (1 - discountRate);
}

console.log(getPrice(true)); // 9000
console.log(getPrice(false)); // NaN

 

또한 변수 호이스팅이 가능하기 때문에, 변수 선언문 이전에 변수를 실수로 사용할 수도 있습니다. 그래도 에러가 발생하지 않죠!

 

console.log(message); // undefined

var message = "안녕하세요";

 

const와 let을 사용할 이유는 충분한 것 같습니다. 위의 문제들을 모두 조기에 방지해줍니다.

 

그러면 왜 let보다는 const를 쓰라고 하는 걸까요?

 

const를 써라

const는 상수를 선언할 때 사용하는 키워드입니다. 이름부터가 상수(constant)입니다.

상수는 변하지 않는 값이죠. 이름 자체에 힌트가 있다고 볼 수 있겠네요.

 

const 키워드를 사용해서 선언했다는 것은 해당 변수가 앞으로 변하지 않는다는 사실을 보장합니다.

그러니 의도치 않은 재할당을 막을 수 있어요.

컴퓨터에 의해 실수를 막을 수 있다! 우리가 코딩을 하는 이유 아니겠어요? 어떤 일을 컴퓨터에게 맡겨서 100%의 정확도를 보장할 수 있다면 당장 맡기지 않을 이유가 없죠.

 

자, 그런데 let을 써야할 것 같은 상황이 발생합니다.

어떻게 변수가 항상 상수처럼 변하지 않을 수 있겠어요? 애초에 변할 수 있다고 해서 변수(variable) 아니겠어요?

예를 들면 아래와 같은 상황에는 let을 쓰는 것이 아주 합리적으로 보입니다.

 

const numbers = [1, 2, 3, 4, 5];

let sum = 0;

for (const number of numbers) {
  sum += number;
}

console.log(sum); // 15

 

하지만 let을 쓰지 않아도 되는 상황일 수 있어요! 예를 들면, 아래와 같이 코드를 좀 바꿔 보면 어떨까요...

 

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((total, number) => {
  return total + number;
}, 0);

console.log(sum); // 15

 

JavaScript 내장 함수를 이용했더니, let 변수를 쓰지 않아도 코드가 완성되었네요!

이렇게 동작이 보장된 함수를 이용해서 실수를 줄이는 것도 좋은 코딩 방법입니다.

만약 상황에 딱 맞는 내장 함수가 없다고 하더라도, 커스텀 유틸 함수를 만들어서 분리해서 사용할 수 있어요.

 

꼭 let이 나쁘다는 건 아닙니다. 아래처럼 명확하고 작은 범위의 코드에서는 let을 써도 나쁘지 않아요.

 

function getAlbumPrice(price, hasCoupon) {
  let discountRate = 0.2; // 기본 할인율

  if (hasCoupon) {
    discountRate = 0.5;
  }

  return price * (1 - discountRate);
}

getAlbumPrice(10000, true); // 5000

(여전히 상수 DISCOUNT_RATE와 함께 early return을 하거나, 아예 할인율 자체를 이 함수에서 관리하지 않도록 빼는 것이 좋아 보이지만, 예시 코드니 일단 넘어갑시다)

 

다만 코드가 길어지거나, 스코프가 너무 넓어지기 시작하면 인간은 실수를 할 수 있겠죠.

const를 쓰면 이 실수를 없앨 수 있으니까, let을 사용하기 전에 조금 고민해보는 것은 좋은 습관인 것 같아요.