저번 포스트에서 조건문을 사용하지 않는 것을 clean한 code라고 소개 했었다. 그렇다면 if-else, switch문을 쓰지 않고 조건문을 사용하는 방법을 무엇일까 하고 알아보니 객체리터럴 방법을 사용하는 것이다. 즉, 객체의 key를 조건으로 value를 응답값으로 사용하는 것이다.
그러나 if-else, switch문을 사용하지 않고 객체리터럴을 사용하는 것은 아직 많은 논쟁이 있고 각자 코드 스타일이 있으므로 모든 if-else, switch문을 객체리터럴으로 변경하는 것을 추천하지는 않는다.

if-else, switch를 사용하지 말고, 객체 리터럴을 사용하라

객체리터럴을 사용하여 javascript에서 더 나은 조건문 작성

JavaScript에서 복잡한 조건문을 작성하는 것을 지저분한 코드를 만들게 된다. if/else 또는 switch 문은 부풀려질수 있다.

여러 조건이 있는 경우, 객체 리터럴이 가장 가독성 있는 방법이라는 것을 알았다.

예를 들어 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문을 살펴보면

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";
}

key가 조건이고 value가 응답인 객체가 있다. 그런다음 대괄호를 사용하여 값을 선택할 수 있다.

?? "Rhyme not found" 마지막 부분은 nullish 병합을 사용하여 기본 응답을 할당한다. 이것은 만일 ryhmes[rhyme.toLowercase()]이 null 또는 undefined 이면 (그러나 false나 0는 아닌) 기본 문자열은 "Rhyme not found"로 리턴된다. 우리가 강제적으로 false 또는 0 를 조건문에서 반환하도록 할 수도 있으므로 위의 nullish 병합은 중요하다.

function stringToBool(str) {
  const boolStrings = {
    "true": true,
    "false": false,
  };

  return boolStrings[str] ?? "String is not a boolean value";
}

인위적인 예이지만, nullish 병합이 버그를 발생하지 않는데 유용할 것이다.

좀 더 복잡한 로직

조건 내에서 좀 더 복잡한 논리를 수행해야 하는 경우도 있다. 이를 실행시키기 위해서 객체 키에 대한 값으로 함수를 전달하고 응답할 수 있다.

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";
}

우리는 두 숫자를 전달하여 계산식을 선택하고 응답을 반환한다. 옵셔널체이닝을 사용하여 (?. ) 응답이 정의되었을 경우에만 실행된다. 그렇지 않으면 기본 반환 문자열로 넘어간다.

결론

조건문을 작성하는 것은 취향의 문제이며 특정상황에서는 다른 접근이 필요, 그러나 객체리터럴 방법이 가장 유용한 방법이고 유지 관리가 쉽다.

참조