Tutorial: JavaScript lookup table

A lookup table in JavaScript is an object or array used to map keys to values, providing a way to efficiently retrieve data without using conditional statements. This guide outlines methods to create and use lookup tables for various scenarios.

Understanding the concept of a lookup table

Before diving into creating a lookup table, it's essential to understand its purpose. A lookup table serves as a data structure that replaces runtime computations with a simpler array or object lookup, often resulting in more efficient code.

Choosing the right data structure for your lookup table

Depending on the nature of the keys and values you are working with, you can choose between an object or a Map. Objects are suitable for string or symbol keys, while Maps can handle a broader range of key types, including objects and functions.

Using objects for string-based keys

const fruitColors = {
  apple: 'red',
  banana: 'yellow',
  cherry: 'red',
};

Using Map for diverse key types

const items = new Map([
  [1, 'number'],
  ['one', 'string'],
  [true, 'boolean'],
]);

Creating a static lookup table

Static lookup tables are predefined and do not change at runtime. You define all the keys and values upfront.

Simple object-based lookup table

const errorCodeLookup = {
  400: 'Bad Request',
  401: 'Unauthorized',
  404: 'Not Found',
  500: 'Internal Server Error',
};

Nested object lookup table

const carModels = {
  tesla: {
    modelS: 'electric',
    model3: 'electric',
  },
  ford: {
    focus: 'combustion',
    mustang: 'combustion',
  },
};

Creating a dynamic lookup table

Dynamic lookup tables are built at runtime, often from data fetched from an API or user input.

Populating an object dynamically

let userRoles = {};
users.forEach(user => {
  userRoles[user.id] = user.role;
});

Populating a Map dynamically

let productInventory = new Map();
products.forEach(product => {
  productInventory.set(product.id, product.quantity);
});

Accessing values in a lookup table

Retrieving values is straightforward: for objects, use the dot notation or bracket notation; for Maps, use the get method.

Accessing values from an object

const color = fruitColors.apple; // 'red'
// Or using bracket notation for dynamic keys
const key = 'banana';
const color = fruitColors[key]; // 'yellow'

Accessing values from a Map

const itemType = items.get(1); // 'number'

Handling missing keys in a lookup table

When a key is not found, a JavaScript object will return undefined, while a Map will do the same. You may want to provide a default value.

Providing default values for objects

const getColor = (fruit) => fruitColors[fruit] || 'unknown';

Providing default values for Maps

const getType = (key) => items.get(key) || 'unknown';

Using functions as values

Functions can also be stored in lookup tables, allowing you to associate keys with operations.

const operations = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

const result = operations.add(5, 3); // 8

Optimizing lookup tables for performance

To optimize a lookup table, ensure the keys are easily hashable and the table is not overly large, which can slow down key lookup times.

Using sparse arrays wisely

Sparse arrays can serve as lookup tables with integer keys, but they should be used judiciously as they can lead to performance issues.

const sparseArray = [];
sparseArray[10] = 'ten';
sparseArray[20] = 'twenty';

Conclusion

Lookup tables in JS offer a powerful way to streamline data retrieval by mapping keys to values. By choosing the right structure and populating it thoughtfully, you can enhance both the performance and readability of your code.