JavaScript conditional switch statement

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

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.

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

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

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