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

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"
}

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"

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