DEV Community

JavaScript One-Liner To Replace Switch Statement 🚀

Shameel Uddin on October 09, 2023

JavaScript is a cool language with many hacks available to traditional methods. There's an excellent way to replace switch statements by using obje...

Read full post

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