자바스크립트에서 If-Else, Switch 대신 사용할 수 있는 방법, 객체 리터럴 💡

이 글은 Jack Taylor의 'Don’t Use If-Else and Switch in JavaScript, Use Object Literals' 를 번역한 내용으로 구성돼 있습니다. 번역글이다보니 약간의 오역이나 의역이 있을 수 있습니다 !

출처 : https://betterprogramming.pub/dont-use-if-else-and-switch-in-javascript-use-object-literals-c54578566ba0

 

리터럴(literal)이란?

CS에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어로 쓰인다. 다르게 표현하자면 '문자 그대로의 값'을 뜻한다.
const num = 1; 이라는 코드를 예로 들자면 num은 상수이고, 1은 10진수 정수 리터럴이다. 본 글에서 객체 리터럴이라는 단어를 자주 사용할텐데, 이는 '{}' 이 자체를 뜻하는 것으로 해석하면 될 것 같다.

 

객체 리터럴을 사용해 보다 효율적으로 조건을 작성하는 방법

 

자바스크립트로 복잡한 조건들을 작성하는 건 언제나 꽤 복잡한 코드를 만들 가능성이 있죠. 우리가 주로 쓰는 if/else 문이나 switch/case의 긴 목록은 언제든지 커질 수 있습니다. 조건문을 작성하는 방식은 여러가지가 있는데, 저는 객체 리터럴이 가장 읽기 쉬운 코드를 구성하는 방법이라고 생각합니다. 지금부터 어떻게 작동하는지 보도록 하겠습니다. 그 예시로 어떤 글에서 특정 해당 구절에 대해 뜻을 return하는 기능이 있다고 해보자.

 

 

 if/else 문 

function getTranslation(rhyme) {
  if (rhyme.toLowerCase() === "apples and pears") {
    return "Stairs";
  } else if (rhyme.toLowerCase() === "hampstead heath") {
    return "Teeth";
  } else if (rhyme.toLowerCase() === "loaf of bread") {
    return "Head";
  } else if (rhyme.toLowerCase() === "pork pies") {
    return "Lies";
  } else if (rhyme.toLowerCase() === "whistle and flute") {
    return "Suit";
  }

  return "Rhyme not found";

 

 이 방식은 그리 좋아보이지 않습니다. 읽기 어려울 뿐만 아니라, 모든 문장에 대해 toLowerCase()를 반복합니다. 이에 다음과 같이 switch문을 사용하면 반복을 줄일 수 있습니다.

 

 

 switch/case 문 

function getTranslation(rhyme) {
  switch (rhyme.toLowerCase()) {
    case "apples and pears":
      return "Stairs";
    case "hampstead heath":
      return "Teeth";
    case "loaf of bread":
      return "Head";
    case "pork pies":
      return "Lies";
    case "whistle and flute":
      return "Suit";
    default:
      return "Rhyme not found";
  }

 

 위 코드를 보면  toLowerCase()를 한번만 사용했지만, 여전히 읽기 쉬운 느낌은 아닌 것 같습니다. 또한 switch문은 오류가 발생하기 쉽다는 문제가 있는데, 현재 코드는 단지 값을 반환하는 것이지만 만약 복잡한 코드가 들어온다면 break문(예외처리)을 놓치고 버그가 발생하기 쉽기 때문입니다.

 

대안

 객체를 사용한다면 위 예시 코드들의 동일한 기능을 훨씬 더 깔끔하게 수행할 수 있습니다.

 

function getTranslationMap(rhyme) {
  const rhymes = {
    "apples and pears": "Stairs",
    "hampstead heath": "Teeth",
    "loaf of bread": "Head",
    "pork pies": "Lies",
    "whistle and flute": "Suit",
  };
  
  return rhymes[rhyme.toLowerCase()] ?? "Rhyme not found";
}

마지막 코드에 사용된 '??' 는 Nullish Coalescing Operator라는 ES2020에 새로 추가된 연산자인데, 'A가 null이거나 undefined이면 B로 해라' 라는 연산자입니다.

 키가 조건이고 값이 그에 대한 답인 객체가 있습니다. 그 다음 대괄호 표기법을 사용해 전달된 운율에서 객체의 정확한 값을 선택할 수 있습니다. 또한 마지막 코드에 '??'를 사용해 값이 없을 때, 혹은 정의되지 않았을 때 기본 문자열인 'Rhymes not found' 가 반환됩니다. 

 

조금 더 복잡한 예시

 위 예시는 정말 단순한 형태의 로직이었는데 보통은 이보다 더 복잡한 로직을 짜야 하는 경우가 많습니다. 이를 위해서 객체 키에 값으로 함수를 전달하고 결과를 받아오는 방식을 사용할 수 있습니다.

 

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

 위 예시를 보면 내가 계산하고 싶은 방식을 action 인자로, 계산하고 싶은 수를 num1, num2에 넘겨 그에 대한 값을 받아올 수 있는 구조로 되어 있는걸 볼 수 있습니다. 또한 옵셔널 체이닝 (?.)을 사용해 정의된 action을 입력했을 때만 실행하도록 설정하고, 그렇지 않으면 기본 반환 문자열을 출력하도록 설정할 수 있습니다.

 

결론

 코드를 작성하는 방식은 참 다양하다는 것을 이번 글을 작성하면서 알게 되었습니다. 언제나 if/else를 사용하고 가끔 switch문을 사용하면서, '이 정도면 나름 코드를 깔끔하게 작성했다!' 라고 생각했는데, 이런 새로운 방법을 볼 때마다 다시금 겸손해지게 되는 것 같습니다. 위 예시에서는 Nullish Coalescing Operator, Optional Chaining과 같이 새롭게 만들어진 문법을 활용해 코드 길이를 최소화할 수 있었는데, 아마 또 시간이 흐르면 보다 효율적으로 코드를 작성할 수 있는 새로운 문법이 나올 거고 분명 이보다 더 좋은 코드가 언제든지 나올 수 있다고 생각합니다. 이러한 상황에 대비해 새로운 문법이 나오면 빠르게 학습하고 이를 활용해 코드를 보다 효율적으로 작성하는 방법에 대해 연습해야겠다는 필요를 느끼게 되었습니다. 짧은 번역글이었지만 나름 많은 영감을 받을 수 있었던 기회였습니다! Thanks to Jack Taylor!