A possibly better way than if-else/switch

background

When doing Code Review these two days, I found that many if-else / switch statements are not particularly elegant. In some places with complicated logic, it looks bloated and not so easy to read.

for example:

 const getFaviconIcon = () => {
  const country = process.env.cid || 'id';
  switch (country) {
    case 'id': {
      return '/public/favicon.ico';
    }
    case 'vn': {
      return '/public/favicon.ico';
    }
    default: {
      return '/public/favicon.ico';
    }
  }
};

I just saw an article about this topic recently. If you are interested, you can go to see:

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

The following excerpts from some sample code, hereby declare.

Alright, let's get to the point.

for example:

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

This seems very bloated, and it has done too many judgments lowercasedRhyme === 'xxx' . If there is a new branch in the future, it needs to be judged once.

If replaced switch statement:

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

The situation has improved, but it's still bloated, and we just need to return a value.

It's also easy to miss the break statement when it comes to having more complex functions, causing an error.

Another way:

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

We directly use the form of key-value to get the data, and finally use ?? to get the bottom line.

Here ?? is the so-called 空位合并运算符 :

 const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

For those who are not familiar, you can take a look at the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

If you encounter more complex logic, you can also use this method in suitable scenarios, such as:

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

One thing to note, here we use both the ?. and ?? operators.

in conclusion

The question discussed today is actually quite subjective and has certain personal preferences.

The code 可读性 , 可维护性 should be what we all need to pay attention to.

That's all for today's content, I hope it will be helpful to you.