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?

thanks :)

Answer 1

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.

Answer 2

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; } 

Answer 3

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...

Answer 4

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