Switch vs if…else: A Comparison
To switch or not to switch
Conditional statements are commonplace in JavaScript code. The if…else statement is usually the one learned first. It checks a condition and executes a statement when it is truthy. If the condition is falsy a different statement is executed instead.
Another way to handle this is with the switch statement. It first evaluates an expression and then attempts to match it to one of its case clauses. If it finds a match a statement is executed that is associated with that case. To account for situations where none of the case clauses match the evaluated expression a default case can be used.
This simple switch statement has one case that will execute a statement if it matches the expression and a default case that will run if the case clause does not match. Notice the break here will (you guessed it) break out of the switch statement and run any code after it. This is optional but it prevents unnecessarily executing code that will not match.
Switch and if…else in these examples are both accomplishing the same thing. So is one better than the other? Is there a scenario where one of these is a better choice? Do you want me to quit asking hypothetical questions from the reader and just give a definitive answer already? Well, the answer to the first two questions (we all know the answer to the third) is… it depends.
Both switch and if…else have their advantages depending on the situation. The main factor to consider is the number of conditions. If…else statements really shine with fewer conditions, especially when those conditions evaluate to a boolean.
The equivalent result using a switch case would look something like this:
If evaluating a simple boolean condition the if…else statement is easier to read and has a nicer, simpler flow. The same can be said when dealing with only one condition. Readability suffers with if…else statements when dealing with multiple conditions. Let’s have a look.
With increased conditions, the code starts to become more of a chore to read. Compare that to the same scenario using a switch:
The switch statement is less cluttered, quicker to read, and easier to understand. It is also a little bit faster which gives it another advantage in cases with numerous conditions. The other area where switch statements shine is when multiple conditions execute the same outcome.
Yikes, this if…else statement is a chore to read. There are only a few outputs here but the amount of possible inputs that are being accounted for makes this rather clunky to look at. A switch statement does a much better job here:
This is a pretty big improvement. It’s much easier to read and understand.
To sum it all up, switch and if…else can accomplish the same thing but the best choice depends on the circumstance. If…else statements are ideal when they’re kept simple. Use them with fewer conditions and booleans. Switch cases are better for heavier lifting. They benefit from improved readability and performance when dealing with multiple conditions.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
