Use lookup tables for cleaning up your JS/TS code

Overview

You might use the if of switch statement like the code below when the output of your function is dependent on the given value.

Using the If statement

const colorMapper = (color) => {
  if (color == "yellow") {
    return "amarillo";
  } else if (color == "blue") {
    return "azul";
  } else if (color == "red") {
    return "rojo";
  } else {
    return "No aplica";
  }
};

colorMapper("yellow"); //=> amarillo
colorMapper("pink"); //=> No aplica

Using the switch statement

const colorMapper = (color) => {
  switch (color) {
    case "yellow":
      return "amarillo";
    case "blue":
      return "azul";
    case "red":
      return "rojo";
    default:
      return "No aplica";
  }
};

colorMapper("yellow"); //=> amarillo
colorMapper("pink"); //=> No aplica

Using lookup tables

You can achieve the same result by creating a lookup table like the code below.

As you can see, the code is cleaner and much easier to read!

const colorsTable = {
  yellow: "amarillo",
  blue: "azul",
  red: "rojo",
};

const colorMapper = (color) => colorsTable[color] || "No aplica";

colorMapper("yellow"); //=> amarillo
colorMapper("pink"); //=> No aplica

If you wanna use the lookup table in TypeScript, you can give types to the lookup table like below.

type ColorEn = "yellow" | "blue" | "red";
type ColorEs = "amarillo" | "azule" | "rojo";

const colorsTable: Record<ColorEn, ColorEs> = {
  yellow: "amarillo",
  blue: "azule",
  red: "rojo",
};

const colorMapper = (color: ColorEn): ColorEs | "No aplica" => colorsTable[color] || "No aplica";

colorMapper("yellow"); //=> amarillo
colorMapper("pink"); //=> No aplica

Resources

• Javascript Patterns - Lookup Tables
• Replacing if statements with object lookups
• Consider lookup tables instead of switch or if/else (Example)

Comments

[Mirza Chilman]

So what is the benefits of using a lookup table other than it looks much cleaner?

[Alan Hutcheson]

From the 1st link in the resources section:

• Eliminate the branching by the if-else ladder and make the rule engine a simple O(1) lookup
• Default evaluation does not need to wait for all conditions to get processed. If a key does not exist in the lookup table, it returns the default condition straightaway

[Seanmclem]

Why is this referred to as a lookup table, when it's just a plain old object with values retrieved by keys like with any object?

[WilliamFrank]

You are right, that from a syntactic point of view, this is a plain old object. A pattern, like the lookup table pattern, is a reusable solution to a commonly occurring problem.

The problem, in this case, is how to express a set of exclusive choices so that the code goes directly to the right choice, without evaluating any of the irrelevant choices, making the code shorter, clearer, and more efficient. What makes this object a 'lookup table' is not its syntax, but the purpose to which it is being put (its pragmatics).
Other plain old objects may have very different purposes. Every pattern must use some ordinary js syntactic structures, otherwise, they could not execute. The pattern is not about 'what' but about 'why'.

[Antonio B.]

This is a great article. I wasn't aware of the advantages of this pattern, and more so, I'd not used Record in typescript before so this was extra informative