DEV Community

Cover image for Use an Object Literal, Better than Using Conditional Statements in JavaScript
Irpan Abdul Rahman
Irpan Abdul Rahman

Posted on

Use an Object Literal, Better than Using Conditional Statements in JavaScript

Conditional Statements (If-Else, Switch) can be easily replaced with Object Literals. They make the code better.

Object Literals

An Object Literal is one of the most popular and widely used pattern to define objects in JavaScript. It is a collection of key-value pairs. JavaScript being powerful, adds some additional functionalities to the simple objects through object literals.

const obj = {
   first_name: 'Irpan',
   last_name: 'Abdul Rahman'
}
// An example of an object literal
Enter fullscreen mode Exit fullscreen mode

How can we use Object Literal as a replacement to Conditional Statements?

Let us consider an example scenario to understand this.

A user enters an animal, we need to return the name of its baby (what is is called).

Look at the following codes:

//if conditional
if(animal.toLowerCase()==='cat'){
    return 'Kitten'
} else if(animal.toLowerCase()=='cattle'){
     return 'Calf'
} else if(animal.toLowerCase()==='cheetah'){
     return 'Cub';
} else if(animal.toLowerCase()==='dog'){
     return 'Pup';
} else{
   return "I don't know that"
}

//switch case
switch(animal.toLowerCase()){
   case 'cat': return 'Kitten'
   case 'cattle': return 'Calf'
   case 'cheetah': return 'Cub'
   case 'dog': return 'Pup'
   default: return "I don't know that"
}
Enter fullscreen mode Exit fullscreen mode

The above codes have many lines as we can see. No matter if we write it using if-else or switch case, though switch case reduces the redundant ‘animal.toLowerCase()’.

const babyAnimal = {
   cat:'Kitten',
   cattle:'Calf',
   cheetah:'Cub',
   dog:'Pup'
}
return babyAnimal[animal.toLowerCase()] ?? "I don't know that"
Enter fullscreen mode Exit fullscreen mode

Now, this code works exactly same as the above two codes do. But the difference is that it looks neater and has lesser conditions to check thereby reducing the load time.

I think it’s pretty nice to use this wherever possible. Any thoughts on this? please comment bellow.

credit cover images by Markus Spiske on Unsplash

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay