Shameel Uddin

Posted on Oct 9, 2023

JavaScript One-Liner To Replace Switch Statement 🚀

#webdev #javascript #beginners #programming

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 from switch statements to object-based alternatives.

Traditional way - Switch Statements

const getAnimalName = (animalType) => {
  switch (animalType) {
    case 'dog':
      return '🐶'
    case 'cat':
      return '🐱'
    case 'parrot':
      return '🐦';
    default:
      return 'Unknown';
  }
};

Using switch statements can sometimes lead to unwieldy and hard-to-follow code, especially as your project grows.

The Good Way: Object Literals

const animalNames = {
  'dog': '🐶',
  'cat': '🐱',
  'parrot': '🐦',
};

const getAnimalName = (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 a break statement, which are common pitfalls in switch 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)

Acid Coder • Oct 9 '23

switch: faster

object: cleaner but consume more memory

artydev • Oct 9 '23 • Edited

For the pleasure only :-)

Play with it here : animals

const animalNames = {
  'dog': '🐶',
  'cat': '🐱',
  'parrot': '🐦',
};

const handler = {
  get : (_, animalType) => {
    return  `<div style='font-size:3rem'>${animalNames[animalType]}</div>` || 'Unknown';
  }
}

const animals = new Proxy({}, handler)

const {dog, cat, parrot} =  animals

document.body.innerHTML = `
  <div>This is a ${dog}</div>
  <div>This is a ${cat}</div>
  <div>This is a ${parrot}</div>
`

Olivier • Oct 9 '23

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

artydev • Oct 9 '23 • Edited

@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

Shameel Uddin • Oct 9 '23

This is not an all-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.

Frank Wisniewski • Oct 10 '23 • Edited

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']??'�'
  )

Shameel Uddin • Oct 10 '23

Seems more like a variable name change, not an entire use-case change from this example.

Eckehard • Oct 10 '23 • Edited

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 an object literal selection is no substitute for switch !!!

Here is a typical - but not very useful - example, just to showcase some options

 function makeSound(animalType) => {
  let a=0
  switch (animalType) {

    case 'dog':
      alert("bark")
      a = 1
    break

    case 'cat':
      alert("meuw")
    break

    case 'parrot':
      alert("make America great again")
    break

    default:
      a=-1
  }
  return a
};

So, what can we do here to make things better?

Solution A: Better formatting

 function makeSound(animalType) => {
  let a=0
  switch (animalType) {
    case 'dog': alert("bark"); a = 1;  break
    case 'cat':  alert("meuw");  break
    case 'parrot': alert("make America great again");  break
    default:   a=-1
  }
  return a
};

Solution B: Use else If

 function makeSound(animalType) => {
  let a=0, N=animalType 
    if (N == 'dog') { alert("bark"); a = 1; } else 
    if (N == 'cat') { alert("meuw");  } else 
    if (N == 'parrot') { alert("make America great again");  }
    else   a=-1
  }
  return a
};

Solution C: Use object literal with arrow functions

function makeSound(animalType) {
    let a = 0
    const fn = {
        dog: () => { alert("bark"); a = 1 },
        cat: () => { alert("meuw"); },
        parrot: () => { alert("make America great again") }
    }

    let f = fn[animalType]
    if (f) f()
    else a = -1
    return a
};
makeSound("dog")

If you do not need to handle the "default" case, this is much better readable:

function makeSound(animalType) {
    let a = 0
    const fn = {
        dog: () => { alert("bark"); a = 1 },
        cat: () => { alert("meuw"); },
        parrot: () => { alert("make America great again") }
    }
    fn[animalType]()
    return a
}
makeSound("dog")