Replace Switch Statements with Object Maps and ES6 Map for Cleaner JavaScript

We often need to execute different logic based on conditions. Traditionally, if-else and switch statements are common, but modern JavaScript provides more elegant alternatives: object literal mapping and the Map data structure.

Problems with traditional switch statements

Typical usage of a switch statement:

This approach has several issues:

Verbose and repetitive – each case requires writing the case keyword and a return or break statement.

Prone to errors – forgetting a break leads to unintended fall‑through.

Hard to maintain – adding or modifying branches requires careful insertion in large blocks of code.

Poor readability – especially when each case contains substantial logic.

Using object literal mapping instead of switch

Object mapping is the most direct way to replace a simple switch statement:

Handling complex logic

If each branch contains more complex logic, you can store functions as the object’s values:

Using the Map data structure

ES6 introduced the Map data structure, which offers more powerful features than plain object literals, especially for the following scenarios:

Keys are not limited to strings; they can be any type, including objects and functions.

Frequent addition/removal of key‑value pairs.

Preserving insertion order.

Directly obtaining the size of the map.

Usage example

Function mapping and chaining

Map is well suited for implementing the command or strategy pattern:

class Calculator {
  constructor() {
    this.operations = new Map([
      ['+', (a, b) => a + b],
      ['-', (a, b) => a - b],
      ['*', (a, b) => a * b],
      ['/', (a, b) => a / b],
      ['%', (a, b) => a % b],
      ['', (a, b) => a  b]
    ]);
  }

  calculate(a, operator, b) {
    const operation = this.operations.get(operator);
    if (!operation) {
      throw new Error(`Unsupported operator: ${operator}`);
    }
    return operation(a, b);
  }

  // Extend calculator functionality
  addOperation(operator, fn) {
    this.operations.set(operator, fn);
    return this; // support chaining
  }
}

const calc = new Calculator()
  .addOperation('log', (a, b) => Math.log(a) / Math.log(b));

console.log(calc.calculate(10, '+', 5)); // 15
console.log(calc.calculate(10, 'log', 10)); // 1

Modern JavaScript provides many tools to improve code quality; embracing object mapping and Map can help write cleaner, more maintainable code.