Switch statements in javascript - How to refactor?

In this article, we will see how to write switch statements in javascript and how to refactor them using javascript objects.

The Switch statements are perfectly nice and majorly used in the other traditional language like C, C++, and Java.

Why Switch statement?

The switch statement executes different actions based on the different conditions. Of course, we can solve the above with an if-else ladder but that will make the program too much clumsy. Also, the if-else ladder is advisable only if you have a max of 3 conditions to check.

Javascript has the switch statement but if you’re interested in python then just as a side information ‘python doesn’t have the switch statement but it achieves the same with the dictionary mapping’.

Since the dictionary mapping is similar to object creation in javascript, taking the inspiration from python, we can replace the switch statement with multiple objects which is not a bad idea. This will keep the code simple and maintainable in long run.

Let’s see the most occurred examples which we must have faced in our coding career –

Example 1

Write a code that returns the todays’ day in a string e.g Sunday

Using Switch Statement

				
					let day = new Date().getDay(); 
switch (day) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
console.log(day); // for 30/01/2022 it will return Sunday

Output verification from console.log

without switch i.e Refactored code

				
					const day = new Date().getDay();
const dayMapper = {
    0: "Sunday",
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday"
};
if (dayMapper.hasOwnProperty(day)) {
  console.log(dayMapper[day]); // Sunday
} else {
  console.log("Something went wrong");
}

Output verification from console.log

This is the most basic example, lets’s see one more common but complex example

use-case: Suppose we have to send a GA event for a page e.g for the Home page we will be sending the event label as Page name + its current layout name.

The catch is the page name is coming from the data attribute in DOM.

Let me explain it further with an example –

we need to return the (Page name_Layout name) following for the page name found in the data attribute

				
					homePage -> Home_index
productPage -> Product_pdp
blogPage -> Blog_blog

Example 2

Write a code that returns the page name and its layout name in a string e.g Home_index

exp: Home is the name of the page and index is the layout name of Home Page

Assume HTML which has the page name stored in data attribute is written as –

				
					<div id="my-div" data-page-name="homepage">HTML for homepage</div>

Using Switch Statement

				
					let pageName = document.querySelector('#my-div').dataset.pageName;
let page;
let layout;
let ans;
switch (pageName) {
  case "homepage":
    page = "Home";
    layout = "index";
    break;
  case "productpage":
    page = "Product";
    layout = "pdp";
    break;
  case "blogpage":
    page = "Blog";
    layout = "blog";
    break;
}
ans = page + '_' + layout;
console.log(ans);

Output verification from console.log

without switch i.e Refactored code

				
					let pageName = document.querySelector('#my-div').dataset.pageName;

let dataPageMapper = {
  homepage: 'Home',
  productpage: 'Product',
  blogpage: 'Blog' 
};

let pageLayoutMapper = {
  home: 'index',
  product: 'pdp',
  blog: 'blog' 
};

let page = dataPageMapper.hasOwnProperty(pageName) && dataPageMapper[pageName];

let layout = pageLayoutMapper[page.toLowerCase()];

let ans = page + '_' + layout;

console.log(ans);

Output verification from console.log

Conclusion

Above one is the cleaner way to do it. If in the future, we have more pages available we just need to make the entries in the mapper objects, that’s it.

But with a switch statement, it will be a long ladder of statements and if you forgot to add the break statement then you will fall into the famous switch pitfalls.

Let me know your thoughts like how you handle the switch thing in your code.

If you like my article, you can buy me a coffee

Please also check my medium articles on medium.com

Please share the articles on –

The latest tips and news from the industry straight to your inbox!

Join 30,000+ subscribers for exclusive access to our monthly news and tutorials!