Switch Vs Object Literals

Hello Everyone welcome to my blog 🙏. Hope you are all safe and that this blog finds you in good health ❤️.

In this blog, Let's understand some of the interesting snippets that replace the conventional switch with Object Literals which makes your code simple, cleaner and readable. I hope you enjoy reading this!!

Problem Statement
Let’s create a function which returns fruit names on inputing numbers to it.
For Example :
1. If I enter
1, it should print me Orange
If I enter 2, it should print me Mango
If I enter 3, it should print me Banana
If I enter 4, it should print me Apple
For any other input, print unknown

So, we are good with the Problem statement, It is clear that we can use either if-else or Switch for it.
if-else is straight away eliminated because as per standard coding practices if we have more than 3 conditions it is better to go with a switch.

Note: Please use browser console for seeing the output for below snippets

Solution using switch


It is pretty much a convenient way of the solution but what if we remove break from all the cases, it prints all the cases along with default.

Switch without break

Isn’t it cumbersome to put a break on every case?

Although we can get rid of the break statements on cases just by returning the output still we need to put a return on each case which again is cumbersome.

To avoid this, let’s move on to the object-literal way of solving the above problem statement.

Solution using Object Literal

Object-literal without default

Although the output for 1,2,3,4 is right, we are missing out on the default statement in object literal.

Is default important?
Ofcourse it is, Default will help to handle unexpected output from the given function

How to handle it 🤔 ?

Object-literal with default

This way, we can handle default conditions.
Isn’t it simple, clean and most importantly readable? Yes, it is 🤝

Although we can use the first approach of object literal without default condition only if we are sure about the input which we pass in the function.
But It’s always good to be on the safer side
and handle the default condition 🎯.

This way Object literal can be used as a replacement for the conventional Switch statement.

Here we go, That’s it folks for this blog. Hope everyone liked it.
If you like it, give it a clap 👏 and share it with your friends.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏.

Until Next time,
Happy Learning ✍️

Abhishek Kovuri, UI developer





Frontend developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React useEffect stale closure issue

Docusaurus home icon link with nginx

Create a Weather App with Vue 3 and JavaScript

UI Development with Chakra UI Vue — Accordions

How to Add Keyboard Shortcuts to Your Vue.js App

Using HTML Audio and Video Elements

Create-react-app files/folders structure explained

How to Strip All Non-Numeric Characters from a String in JavaScript?

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
Abhishek Kovuri

Abhishek Kovuri

Frontend developer

More from Medium

MDN semantics and structures w/HTML — chapter 7

JavaScript: How to fix ng.ps1

JavaScript and Prototype

The Good HTML Component