How to ‘switch’ from ‘if-else’ in JavaScript

and make a cleaner JavaScript code

Yosef Andreas
Apr 12 · 3 min read
Photo by Ilya Pavlov on Unsplash

Since programming language is abstract, the best way to understand it is by using an analogy.

JavaScript is no exception.

Today, I want to explain the concept of switch-case as an alternative to if-else in a possible plain using, of course, an analogy.

Case study (pun intended)

Imagine that you have an electrical circuit with different outputs. Each output is inside its respective case with a unique connector shape and equipped with an indicator light that will turn on when in use.

Now, whenever you want to operate a certain case, you must pair it with a perfectly similar connector. Should they are matched, the indicator runs and the rest of the cases are ignored. Or to put it simply, you can decide which one to switch on.

What a cool idea, huh?

Now let’s take a look at a simple electrical circuit below:

Created by the author in Whimsical

Let’s say that you want to turn on the indicator for the rectangle connector. What will you do? Yes, you use the pin with a similar rectangle shape to the connector.

Created by author in Whimsical

The indicator will turn on and the brake is activated, ignoring the rest of the connector. If you change the pin with the diamond shape, it won’t turn on the rectangle indicator since they are no match. What it will do is now finding the next match — in this case, the diamond connector:

Created by author in Whimsical

The same thing happens if we change the pin with an octagon shape:

Created by author in Whimsical

But, what if there is no match found? Isn’t it will make the system fail? Fret not! Enter the default case (or just default). Think of default as a universal connector that will adjust its shape to match whatever the switch when it can’t find its match.

Created by author in Whimsical

Since the default state is the last checkpoint, it won’t have break.

Putting It All Together and Final Thought

Now let’s put the analogy we talked about before with its actual JavaScript concept:

Left: analogy of switch statement | Right: the actual JavaScript `switch` concept

Pretty much the same right?

Hope this story gives you the plain understanding of switch statement in JavaScript.

CodeX

Everything connected with Tech & Code

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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