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

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay