Switch statements in javascript – How to refactor?

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 string e.g Sunday

using the 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

UseCase: 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

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

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

using the 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 other articles on my website https://weekendtutorial.com

Edit

In Example 1 -

Since array is also an object so we could optimise the code further -

const dayNum = new Date().getDay();
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];
console.log(days[dayNum]); // Sunday

In Example 2 -

We could have club the object like this -

let pageName = document.querySelector('#my-div').dataset.pageName;
let dataPageMapper = {
  homepage: {
     page: 'Home',
     layout: 'index'
  },
  productpage: {
     page: 'Product',
     layout: 'pdp'
  },
  blogpage: {
     page: 'Blog',
     layout: 'blog'
  } 
};

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

let ans = pageObj.page + '_' + pageObject.layout;
console.log(ans);

Above is also fine, but actual example was taken considering the possibility of when the clubbing the object is least feasible.

Of course, if the object are coming from different files or place, we can still create another by clubbing them but that will introduce another problem viz. code duplicacy which should be avoided.