I found that in JavaScript, switch is always a sentence of instruction and using it as an expression will give an error. So when I have to assign different values to a variable according to different condition, I have to write like this:

switch(true){
    case x<0.1: aVariable = '#f0f0f0';break;
    case x<0.2: aVariable = '#d3eadf';break;
    case x<0.3: aVariable = '#bce1cd';break;
    case x>=0.3: aVariable = '#9cd4b9';break;
}

Or I should use 'eval()' like this:

aVariable = eval("switch(true){"+
    "case x<0.1:'#f0f0f0';break;"+
    "case x<0.2:'#d3eadf';break;"+
    "case x<0.3:'#bce1cd';break;"+
    "case x>=0.3:'#9cd4b9';break;"+
"}");

Is there any other way to use switch as an expression rather than a sentence of instruction so that I can make my code less verbose?

I found that in JavaScript, switch is always a sentence of instruction and using it as an expression will give an error. So when I have to assign different values to a variable according to different condition, I have to write like this:

switch(true){
    case x<0.1: aVariable = '#f0f0f0';break;
    case x<0.2: aVariable = '#d3eadf';break;
    case x<0.3: aVariable = '#bce1cd';break;
    case x>=0.3: aVariable = '#9cd4b9';break;
}

Or I should use 'eval()' like this:

aVariable = eval("switch(true){"+
    "case x<0.1:'#f0f0f0';break;"+
    "case x<0.2:'#d3eadf';break;"+
    "case x<0.3:'#bce1cd';break;"+
    "case x>=0.3:'#9cd4b9';break;"+
"}");

Is there any other way to use switch as an expression rather than a sentence of instruction so that I can make my code less verbose?

• javascript
• switch-statement
• eval

Share Improve this question Follow asked Sep 8, 2015 at 6:51 Yan YangYan Yang 1,97433 gold badges1818 silver badges3838 bronze badges 10

• @Andreas The first snippet is from my working app. The second snippet has been tested in the console of Chrome Developer Tools. – Yan Yang Commented Sep 8, 2015 at 6:57
• Fu** typo... Never mind^^ – Andreas Commented Sep 8, 2015 at 7:00
• @Andreas Well, so it's my typo that caused you to misjudge the result? – Yan Yang Commented Sep 8, 2015 at 7:06
• This is definitely a legitimate question, I'm not sure why it has been downvoted - downvoter care to explain? – Benjamin Gruenbaum Commented Sep 8, 2015 at 7:09
• @YanYang No my own mistake/stupidity... :( – Andreas Commented Sep 8, 2015 at 7:13

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 5

An alternative is to use a function and invoke it immediately:

var aVariable = (function(){  switch(true){
  case x<0.1: return '#f0f0f0';
  case x<0.2: return '#d3eadf';
  case x<0.3: return '#bce1cd';
  case x>=0.3: return '#9cd4b9';
}})(); // call it immediately

You can also do this trick with ifs since return short circuits:

var aVariable = (function(){
  if (x < 0.1) return '#f0f0f0';
  if (x < 0.2) return '#d3eadf';
  if (x < 0.3) return '#bce1cd';
  if (x >= 0.3) return '#9cd4b9';
})(); // call it immediately

Basically, the trick is that we're wrapping it in a function expression which converts it into an expression, this technique of an immediately invoked function expression is a useful trick in JavaScript.

You can use a direct approach with an array and calculate the index when you have values with fixed interval. So according to your values, you need

value index ment
----- ----- ------------------------------------------
 0.0     0  take integer of value * 10 
 0.05    0  see above
 0.1     1  see above
 0.15    1  see above
 0.2     2  see above
 0.25    2  see above
 0.3     3  see above
 0.35    3  covert by condition and a fixed value of 3
 0.40    3  see above

This answer may not look good for four values, but when it es to more values with fixed intervals, than it is easier to think about an other structure of decision logic.

function color(x) {
    return ['#f0f0f0', '#d3eadf', '#bce1cd', '#9cd4b9'][x > 0.3 ? 3 : x * 10 | 0];
}
var i;
for (i = 0; i < 0.5; i += 0.05) {
    document.write(i.toFixed(4) + ' ' + color(i) + '<br>');
}

In addition to the roundabout methods described in other answers, "switch expression" will be achievable when either of the two JS proposals materialize:

• pattern matching
• do-expressions

This is not a very good use of switch. The switch (true) trick is generally frowned upon. If you do choose to use it, and you do want it to "return" a value, then yes, you could wrap it in an anonymous function. What a lot of extra machinery! Why not just write

x < 0.1 ? '#f0f0f0' :
x < 0.2 ? '#d3eadf' :
x < 0.3 ? '#bce1cd' :
'#9cd4b9'

This is not to say there are not valid use-cases for wanting a statement or block to return a value, and there have been animated discussion on the ES Discuss group about this very topic. I'm just saying this is not really one of those cases.