Lookup Tables 관련

The Front-End Performance Optimization Handbook – Tips and Strategies for Devs

---

When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...

• Why lookup tables are better for many conditions:
  • 1. Constant time complexity ()
  • 2. Performance gains with many conditions
  • 3. Code brevity
  • 4. Dynamic configuration
  • 5. Reduced cognitive load

---

The Front-End Performance Optimization Handbook – Tips and Strategies for Devs

When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...

When there are many conditional statements, using switch and if-else is not the best choice. In such cases, you might want to try lookup tables. Lookup tables can be constructed using arrays and objects.

switch (index) {
  case '0': return result0
  case '1': return result1
  case '2':  return result3
  case '4': return result4
  case '5': return result5
  case '6': return result6
  case '7': return result7
  case '8': return result8
  case '9': return result9
  case '10': return result10
  case '11': return result11
}

This switch statement can be converted to a lookup table:

const results = [result0,result1,result2,result3,result4,result5,result6,result7,result8,result9,result10,result11]

return results[index]

If the conditional statements are not numerical values but strings, you can use an object to build a lookup table:

const map = {
  red: result0,
  green: result1,
}

return map[color]

---

Why lookup tables are better for many conditions:

1. Constant time complexity ($O\left(1\right)$)

Lookup tables provide direct access to the result based on the index/key, making the operation time constant regardless of how many options there are. In contrast, both if-else chains and switch statements have linear time complexity ($O\left(n\right)$) because in the worst case, they might need to check all conditions.

2. Performance gains with many conditions

As the number of conditions increases, the performance advantage of lookup tables becomes more significant. For a small number of cases (2-5), the difference is negligible, but with dozens or hundreds of cases, lookup tables are substantially faster.

3. Code brevity

As shown in the examples, lookup tables typically require less code, making your codebase more maintainable.

4. Dynamic configuration

Lookup tables can be easily populated dynamically:

const actionMap = {};

// Dynamically populate the map
function registerAction(key, handler) {
  actionMap[key] = handler;
}

// Register different handlers
registerAction('save', saveDocument);
registerAction('delete', deleteDocument);

// Use it
if (actionMap[userAction]) {
  actionMap[userAction]();
}

5. Reduced cognitive load

When there are many conditions, lookup tables eliminate the mental overhead of following long chains of logic.

When to use each approach:

• If-else: Best for a few conditions (2-3) with complex logic or different variables being checked
• Switch: Good for moderate number of conditions (4-10) checking against the same variable
• Lookup tables: Ideal for many conditions (10+) or when you need O(1) access time

In real applications, lookup tables might be populated from external sources like databases or configuration files, making them flexible for scenarios where the mapping logic might change without requiring code modifications.