Using switch statements for multiple conditions in JavaScript

Other Questions JavaScript
1

I’m looking for a way to handle multiple conditions within a switch statement in JavaScript. For instance, I’m trying to achieve something along these lines:

switch (inputVar) {
    case 'john':
    case 'mark':
    case 'susan':
        alert('Hello there!');
        break;

    default:
        alert('This is the default case.');
        break;
}

Is this possible in JavaScript? If not, could you suggest a different approach that adheres to the principles of the DRY concept?

2

You can definitely implement multiple conditions in a switch statement in JavaScript as you’ve shown, which works perfectly fine. This approach adheres to the DRY principle, as you don’t repeat the same code block for each case statement. Here’s a way to achieve similar functionality that can be even more efficient, especially if you anticipate scaling up the number of cases:

<script>
  const inputVar = 'susan';
  const validNames = ['john', 'mark', 'susan'];

  if (validNames.includes(inputVar)) {
    alert('Hello there!');
  } else {
    alert('This is the default case.');
  }
</script>

This code snippet uses an array to list out the matching conditions and leverages the includes method to check if inputVar matches any of the desired names. This method is efficient and concise, emphasizing reusability and maintaining clean code. If you need to add more conditions, just update the validNames array without altering the logic. Keep coding efficiently! :rocket:

3

Another method to manage multiple conditions effectively in a more structured way involves using a Map with JavaScript functions as values. This approach provides clarity and opens doors for further expansion, especially when future requirements call for more complex logic.

const actions = new Map([
    ['john', () => alert('Hello there!')],
    ['mark', () => alert('Hello there!')],
    ['susan', () => alert('Hello there!')]
]);

const performAction = (inputVar) => {
    if (actions.has(inputVar)) {
        actions.get(inputVar)();
    } else {
        alert('This is the default case.');
    }
};

performAction('susan'); // This will alert 'Hello there!'

Explanation:

  • Use of Map: A Map is excellent for such use cases, as it pairs keys directly to functions, making it clean and organized. This also makes adding or modifying cases straightforward - simply update the Map.
  • Function as a Value: By mapping each name to a function, the implementation becomes flexible, allowing the execution of complex logic within each case, if necessary.
  • Scalable: Should you wish to expand this further, handling additional logic or different parameters becomes a matter of modifying or expanding the Map entries.

This approach helps maintain alignment with the DRY principle while offering a robust pattern for managing condition-based logic in JavaScript.

4

You can also use an object as a lookup table, creating a very readable and maintainable solution. This maintains DRY by centralizing actions in one place:

<script>
  const actions = {
    'john': () => alert('Hello there!'),
    'mark': () => alert('Hello there!'),
    'susan': () => alert('Hello there!'),
  };

  const inputVar = 'susan';

  (actions[inputVar] || (() => alert('This is the default case.')))();
</script>

Explanation:

  • Object as Lookup: Using an object maps keys (names) to functions directly.
  • Default Handling: Uses a short-circuit evaluation for default case.
5

If you're looking for another approach that keeps your code clean and adheres to the DRY principle, consider using a function to map your inputs to corresponding actions. This method is straightforward and allows you to easily add or modify the available conditions:

function handleInput(inputVar) {
  const response = {
    'john': () => alert('Hello there!'),
    'mark': () => alert('Hello there!'),
    'susan': () => alert('Hello there!'),
  };

  return response[inputVar] ? response[inputVar]() : alert('This is the default case.');
}

// Usage example:
handleInput('susan'); // Alerts 'Hello there!'

Explanation:

  • Use of Function: A function "handleInput" acts as a controller for your conditions. It reduces redundancy by centralizing the actions in a single structure.
  • Dynamic Action Execution: By checking if the input exists in the response object, it executes the corresponding function dynamically.
  • Easy to Extend: To add more names, just expand the "response" object without changing the rest of the logic.

This method is efficient and keeps your codebase easier to manage, specifically useful when scaling up with more conditions.