Switch/case using logic operators such as >= and &&

Question

I have this code that first reads which position of a checkbox is checked and then executes several ifs. Then I thought I could make the code smaller if I used switch/case, while also portfolio-ing the command for later uses. The command was like this:

if (fsex[0].checked {
gender = 'man'
if (age >= 0 && age <= 10) {
img.setAttribute('src', 'male-baby.png')
} else if

I tried using switch by changing the below "gender" line to something like this:

switch (age) {
case (age >=0 && age <= 10):
img.setAttribute('src', 'male-baby.png')
break
case ...etc

This didn't work.

Then I tried with case >=0, which then the VSCode immediatly returns a sintax error "expression expected.

Is there a way I can use switch/case to this one? Or I should just stick with several if/ else ifs?

also if you consider performance, please take a look at this detailed answer https://stackoverflow.com/a/12259830/8389449 — Niloy, Jul 18 '22 at 19:32
"portfolio-ing" a) please don't verb nouns; b) are you talking about templatizing? Or something else? — Heretic Monkey, Jul 18 '22 at 19:32
Just trying to use switch instead of if/else in this one so I could show the command. Nothing else. Niloy, thanks for the post, I can now see in every situation if/else is faster than switch. But I would know if you can use switch with these logical operators anyway. — Rodhis, Jul 18 '22 at 19:35

score 0 · Accepted Answer · answered Jul 18 '22 at 19:33

You can use this "trick":

const age = 14;

switch(true) 
{
  case age > 5 && age <= 10:
    console.log('bla 1');
  break;
  case age > 10 && age <= 20:
    console.log('bla 2');
  break;
  case age > 20 && age <= 30:
    console.log('bla 3');
  break;
}

coreyward · Answer 2 · 2022-07-18T19:44:25.357

Each case branch of a switch statement expects an expression, and the value of the expression will be compared to the initial argument. In this case, that means you are comparing age to either true or false (the result of the expression (age >= 0 && age <= 10). You can technically use switch (true) for this, but there isn't much value in doing so.

This said, there are other patterns that allow you to express what you are trying to do without a conditional with many branches. For example:

[
  { max: 10, callback: () => { img.setAttribute("src", "example.jpg") }, 
  { max: 15, callback: () => { ... },
  { max: 20, callback: () => { ... },
].find(({ max }) => max >= age)?.callback()

Or if you really don't care about others understanding the code in the future you can take advantage of consistent insertion-retrieval order:

const conditions = {
  10: () => { console.log("a") }, 
  15: () => { console.log("b") },
  Infinity: () => { console.log("c") },
}

Object.entries(conditions).find(([max]) => max >= age)?.[1]()

Using an object and arrow function into another object! A bit advanced for me but I'll try lol. Thanks — Rodhis, Jul 18 '22 at 19:40

Switch/case using logic operators such as >= and &&

2 Answers2