JavaScript is a cool language with many hacks available to traditional methods. There's an excellent way to replace switch statements by using objects!
Let's take a closer look at how you can make your JavaScript code cleaner and more readable by transitioning fromswitch statements to object-based alternatives.
Traditional way - Switch Statements
constgetAnimalName=(animalType)=>{switch(animalType){case'dog':return'🐶'case'cat':return'🐱'case'parrot':return'🐦';default:return'Unknown';}};Usingswitch statements can sometimes lead to unwieldy and hard-to-follow code, especially as your project grows.
The Good Way: Object Literals
constanimalNames={'dog':'🐶','cat':'🐱','parrot':'🐦',};constgetAnimalName=(animalType)=>animalNames[animalType]||'Unknown';Embrace the power of object literals! 🌟 By mapping values to their corresponding results in an object, you can make your code more elegant, clean, and easier to maintain.
The Benefits 🌈
👉Readability: Object literals make your code more straightforward to read and understand. You can quickly grasp what each value represents.
👉Maintainability: When you need to add or modify mappings, you only need to update the object, keeping your codebase organized and maintainable.
👉Reduced Errors: Object literals reduce the chances of making typos or forgetting abreak statement, which are common pitfalls inswitch statements.
👉Cleaner Code: Cleaner code is not just a buzzword; it's a reality when you use object literals. Your code becomes more concise and easier to work with.
Happy coding! 🎉💻✨
Follow me for more such content:
LinkedIn:https://www.linkedin.com/in/shameeluddin/
Github:https://github.com/Shameel123
Top comments(14)
For the pleasure only :-)
Play with it here :animals
constanimalNames={'dog':'🐶','cat':'🐱','parrot':'🐦',};consthandler={get:(_,animalType)=>{return`<div style='font-size:3rem'>${animalNames[animalType]}</div>`||'Unknown';}}constanimals=newProxy({},handler)const{dog,cat,parrot}=animalsdocument.body.innerHTML=` <div>This is a${dog}</div> <div>This is a${cat}</div> <div>This is a${parrot}</div>`
- WorkLead Dev
- Joined
I'm sorry but at which point a "trick" is an improvement in readability compared to a statement known by any developer in almost all language ?
In my opinion any one liner is usually hurting readability compared to more verbose equivalent because you usually need to stop to understand what's happening in this succession of command
@olivier
I don't think this is a 'trick", this is at least for me, a real feature.
You are absoutely free to use it or not, but everyone should be advertised of those little kown features
Regards
- EducationMasters in Computer and Information Engineering
- WorkSoftware Engineer
- Joined
This is not anall-developer thing. If you are into JS then you learn these kind of things to increase readability.
More verbose does not always been better readability, as most people have started to brag about after taking a reverse-brake these days.
I wouldn't think of using the switch statement for this use case.
The example is misleading in that the function getAnimalName doesn't return an animal name but the corresponding symbol for the animal. It should, therefore, be correctly named getAnimalSymbol.
There is no need to write a function for this.
const animalsymbols = { 'dog': '🐶', 'cat': '🐱', 'parrot': '🐦', }; console.log( animalsymbols['dog']??'�' )- EducationMasters in Computer and Information Engineering
- WorkSoftware Engineer
- Joined
Seems more like a variable name change, not an entire use-case change from this example.
- LocationGermany
- WorkNumerical simulation specialist, IoT developer
- Joined
The switch statement in Javascript is pretty verbose, so this is a nice inspiration to think about better solutions.
Switch is usually used with "break", so the code tends to be pretty verbose. But it is able to handle different code in each statement, so anobject literal selection is no substitute for switch !!!
Here is a typical - but not very useful - example, just to showcase some options
functionmakeSound(animalType)=>{leta=0switch(animalType){case'dog':alert("bark")a=1breakcase'cat':alert("meuw")breakcase'parrot':alert("make America great again")breakdefault:a=-1}returna};So, what can we do here to make things better?
Solution A: Better formatting
functionmakeSound(animalType)=>{leta=0switch(animalType){case'dog':alert("bark");a=1;breakcase'cat':alert("meuw");breakcase'parrot':alert("make America great again");breakdefault:a=-1}returna};Solution B: Use else If
functionmakeSound(animalType)=>{leta=0,N=animalTypeif(N=='dog'){alert("bark");a=1;}elseif(N=='cat'){alert("meuw");}elseif(N=='parrot'){alert("make America great again");}elsea=-1}returna};Solution C: Use object literal with arrow functions
functionmakeSound(animalType){leta=0constfn={dog:()=>{alert("bark");a=1},cat:()=>{alert("meuw");},parrot:()=>{alert("make America great again")}}letf=fn[animalType]if(f)f()elsea=-1returna};makeSound("dog")If you do not need to handle the "default" case, this is much better readable:
functionmakeSound(animalType){leta=0constfn={dog:()=>{alert("bark");a=1},cat:()=>{alert("meuw");},parrot:()=>{alert("make America great again")}}fn[animalType]()returna}makeSound("dog")
This seems to be the standard in Python, as it does not have aswitch statement.
You usematch instead ofswitch in python
- EducationKyiv National Linguistic University
- WorkApplication Developer
- Joined
Let's add another case, chihuahua, which requires you to use the dog emoji, as in the dog case, how would you tackle this with object?
For further actions, you may consider blocking this person and/orreporting abuse
