JavaScript conditional switch statement

Question

Is there a way to write a conditional switch statement in JavaScript?

I'm guessing not, since the following is always going to default:

var raw_value = 11.0;
switch(raw_value)
{
    case (raw_value > 10.0):
      height = 48;
      width = 36;
      break;
    case (raw_value > 5.0):
      height = 40;
      width = 30;
      break;
    default:
      height = 16;
      width = 12;
      break;
}

If not, what should I use instead - a long if/else statement?

One nice solution would be an array, and a JavaScript version of this recent PHP question.... but that's not going to be trivial to port. — Pekka
– Pekka, Commented Nov 2, 2010 at 21:24
It's not THAT long of an if - else statement (if, else if, else). Pretty standard (and less indentation). — Jared Updike
– Jared Updike, Commented Nov 2, 2010 at 21:26
If/else takes less space, easier to read, less to write and less prone to self inflicted bugs.. — BGerrissen
– BGerrissen, Commented Nov 2, 2010 at 22:10

Cœur · Accepted Answer · 2017-08-01 15:01:16Z

161

Like this:

var raw_value = 11.0;
switch(true) {
    case (raw_value > 10.0):
      height = 48;
      width = 36;
      break;
    case (raw_value > 5.0):
      height = 40;
      width = 30;
      break;
    default:
      height = 16;
      width = 12;
}

The expressions in the case statements will evaluate to true or false, and if that matches the switch condition... voilà. The default acts like an else.

Bonus: you can invert the whole logic by simply replacing true with false. With if ... else if statements, you'd have to edit every if-clause individually.

edited Aug 1, 2017 at 15:01

Cœur

39k25 gold badges207 silver badges282 bronze badges

answered Nov 2, 2010 at 22:12

DanMan

11.6k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruan Mendes Over a year ago

This should be the right answer, as it does what the OP asked in the style asked. However, I had a hard time the first time I saw a switch(true) statement.

Matthew Pitts Over a year ago

Up voted and should be marked as the answer. Most programmers (or maybe just me) with server language exp. find the JS implementation non-intuitive. Its kind of weird starting the evaluated expression and working backwards!

Isaac Pak Over a year ago

Just a side note. This is a clear example to not assume the guy with the most SO points has the right answer.

Gumbo · Accepted Answer · 2010-11-02 21:24:45Z

36

In a switch statement, the evaluated value of the switch expression is compared the the evaluated values of the cases. So here the value of raw_value (number) is compared to raw_value > 10.0 (comparison expression) and raw_value > 5.0 (comparison expression).

So unless one of your case expressions yield a number equal to 11.0 or you use the switch expression true, you will always get the default case.

Just use a simple if/else instead:

var raw_value = 11.0;
if (raw_value > 10.0) {
    height = 48;
    width = 36;
} else if (raw_value > 5.0) {
    height = 40;
    width = 30;
} else {
    height = 16;
    width = 12;
}

answered Nov 2, 2010 at 21:24

Gumbo

657k112 gold badges792 silver badges852 bronze badges

1 Comment

user166390 Over a year ago

And without the need for break, it's just as clean as the original.

Romain Linsolas · Accepted Answer · 2010-11-02 21:27:16Z

1

No, the switch statement does not work used like that. However, this statement is not always simpler. For example, the switch version takes 15 lines:

var raw_value = 11.0;
switch(raw_value) {
    case (raw_value > 10.0):
      height = 48;
      width = 36;
      break;
    case (raw_value > 5.0):
      height = 40;
      width = 30;
      break;
    default:
      height = 16;
      width = 12;
      break;
}

and the "long" if/else version only 11:

var raw_value = 11.0;
if (raw_value > 10.0) {
      height = 48;
      width = 36;
} else if (raw_value > 5.0) {
      height = 40;
      width = 30;
} else {
      height = 16;
      width = 12;
}

So in your case, it is better to use the second one than the first...

answered Nov 2, 2010 at 21:27

Romain Linsolas

82.1k52 gold badges207 silver badges277 bronze badges

2 Comments

GrayedFox Over a year ago

Less lines of code is not objectively"better", since "good code" is subjective. Readability and ease of understanding are two other factors. I would perhaps add that this approach is better "if the goal is using as few lines of code as possible"

mmsilviu Over a year ago

Based on how 'switch' is working, the first example will always hit default

Ruan Mendes · Accepted Answer · 2018-05-21 11:10:16Z

1

Don't try this at home, or take it too seriously, this is just for sugary fun...

function conditionalSwitch(value, cond, callback /* cond, callback, cond, callback, ... */ ) {
  for (var i = 1; i < arguments.length; i += 2) {
    if (arguments[i](value)) {
      arguments[i + 1](value);
      return;
    }
  }
}



function test(val) {
  let width, height;

  conditionalSwitch(val,
  
    (val) => val > 10,
    () => [height, width] = [48,36],

    (val) => val > 5,
    () => [height, width] = [40, 30],

    // Default
    () => true,
    () => [height, width] = [16, 12]
  )
  console.log(width, height);
}


test(4.9);  // 12 16
test(5.1);  // 30 40
test(10.1); // 36 48

edited May 21, 2018 at 11:10

answered Dec 15, 2010 at 22:24

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

2 Comments

sij_a Over a year ago

Erm, shouldn't this be in codepen or something, some place fun! Don't see the point of it being here...

Ruan Mendes Over a year ago

@sij_a And thee years later, there it is :D

Yoho · Accepted Answer · 2022-08-30 13:22:03Z

1

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

You can use switch (true) and add cases that evaluate to boolean

answered Aug 30, 2022 at 13:22

Yoho

1092 bronze badges

Collectives™ on Stack Overflow

JavaScript conditional switch statement

5 Answers 5

3 Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related