An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
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 youre interested in python
then just as a side information python doesnt 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.
Lets 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
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_indexproductPage -> Product_pdpblogPage -> 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
Original Link: https://dev.to/ajayv1/switch-statements-in-javascript-how-to-refactor-5gl8
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To