Switch statements in javascript – How to refactor?
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-30 20:18:17

---
canonical_url: https://weekendtutorial.com/how-to-refactor-switch-statements-in-javascript/
---

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


![using Switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfk6i0tiyrkep95b965n.png)

### 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


![without Switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qidkw6tc4dk9d483h12t.png)


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


![page mapper using switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8cuoztvjj7iqj0okd24.png)

### 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

![page mapper with no switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zq691g4lpzbnnzwm0or5.png)

## 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](https://www.buymeacoffee.com/ajayv)

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.