Why we REALLY need to stop using switch statements in JavaScript

Image for post
Image for post

Ever since the dawn of programming, most programming languages contain the switch statement.

For those who never heard of the switch statement, it is used to perform a set of actions based on the current value of a given variable (an example will be presented in a second).

In other words, we use the switch statement to select one of many code blocks to be executed.

The main reason for the existence of the switch statement was to avoid if-else structure in certain cases.

For example, lets create a function that returns the result of a binary operation between two numbers, according to an operation string given to the function.

If we use an if-else structure, the function will be written as follows

As one may notice, the code is cluttered and involves many if-else statements which all focus on determining the value of the parameter operation.

For such cases (which are surprisingly common), the switch statement was created, to relieve us from this cluttered mess.

Today, thanks to Javascript’s objects and functional programming concepts, we can transform most switch statements to an object.

The code above will be changed as follows

Not only that we got a function that still works the same, we have a clear separation between logic and value parsing.

So why do we need to stop using the switch statement?

In order to demonstrate this, we will focus on the following problem.

Alice and Bob are enjoying a game of Rock, Paper and Scissors.
Our task is to write a function that evaluates a single game between Alice and Bob and outputs the winner of the game.

Let’s examine several solutions to this problem, and show why the use of the switch statement isn’t as helpful as once has been considered.

In this solution, we will use the switch structure.

In order to know who the winner is, we first determine Alice’s selection with a switch statement , and then determine Bob’s selection with another switch statement.

One can notice that the function (though short) still looks a bit cluttered.

Let’s create an object, similar to the switch structure, with keys that determine the possible selections.

The value of each key, will be another object that contains only the selections that will lead to a win.

Now we will use the object to construct a function that given an object (in the structure described earlier) will return a new function.

The new function will receive Alice’s and Bob’s selections and output who the winner is.

Finally, we can build the desired function!

That’s it!

This is the whole function!

Notice how we don’t have the clutter of the case, default and break statements that was previously added to the code.

So why do we REALLY need to stop using the switch statement?

After a long afternoon of playing Rock, Paper and Scissors, Alice and Bob wanted to play something more exciting and decided to play Rock, Paper, Scissors, Lizard, Spock.

Rock, Paper, Scissors, Lizard, Spock is a game, invented by Sam Kass and Karen Bryla, that extends the Rock, Paper and Scissors game.

The rules of the game are as follows.

Scissors cuts Paper
Paper covers Rock
Rock crushes Lizard
Lizard poisons Spock
Spock smashes Scissors
Scissors decapitates Lizard
Lizard eats Paper
Paper disproves Spock
Spock vaporizes Rock
(and as it always has) Rock crushes scissors

Below is a graphical representation

Image for post
Image for post
A diagram of the game’s rules. (from The Big Bang Theory Wiki | Fandom)

Once again, our task is to write a function that evaluates a single game between Alice and Bob and outputs the winner of the game.

Since we can’t “extend” the function we created earlier, we are left with no other choice but to create an entirely new function.

Not only we had to duplicate the code from the previous function, this function is more cluttered, harder to read and difficult to maintain.

Thanks to the previous function we created earlier (createRuleGame), all we need to do is to create a new object with the game’s “rules” and use it.

And the desired function is created as follows

Mind Blowing!

The bottom line

It will be a long way until the switch statement will be deprecated, but it doesn’t mean that we still have to use it.

By leveraging the power of Objects and Functional Programming concepts in Javascript (and other programming languages), we can create a cleaner, readable and easy to maintain codebase

So, if you still have some “ugly” switch statements in your code, don’t be afraid to give it the makeover it deserves!

Written by

Software Engineer and MSc graduate. Experienced developer, passionate about teaching and programming. Well organised with a passion for learning new things

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store