How can I use ranges in a switch case statement using JavaScript? So, instead of writing code for each and every single possibility, I'd like to group them in ranges, For example:
switch(myInterval){ case 0-2: //doStuffWithFirstRange(); break; case 3-6: //doStuffWithSecondRange(); break; case 6-7: //doStuffWithThirdRange(); break; default: //doStuffWithAllOthers(); }
Using range in switch case in C/C++ You all are familiar with switch case in C/C++, but did you know you can use range of numbers instead of a single number or character in case statement.
The JavaScript switch case is a multiple if else statement. It takes a conditional expression just like an if statement but can have many conditions—or cases—that can match the result of the expression to run different blocks of code.
The JavaScript switch keyword is used to create multiple conditional statements, allowing you to execute different code blocks based on different conditions.
You have at least four options:
case
As shown by LightStyle, you can list each case explicitly:
switch(myInterval){ case 0: case 1: case 2: doStuffWithFirstRange(); break; case 3: case 4: case 5: doStuffWithSecondRange(); break; case 6: case 7: doStuffWithThirdRange(); break; default: doStuffWithAllOthers(); }
if
/ else if
/ else
If the ranges are large, that gets unwieldy, so you'd want to do ranges. Note that with if...else if...else if
, you don't get to the later ones if an earlier one matches, so you only have to specify the upper bound each time. I'll include the lower bound in /*...*/
for clarity, but normally you would leave it off to avoid introducing a maintenance issue (if you include both boundaries, it's easy to change one and forget to change the other):
if (myInterval < 0) { // I'm guessing this is an error } else if (/* myInterval >= 0 && */ myInterval <= 2){ doStuffWithFirstRange(); } else if (/* myInterval >= 3 && */ myInterval <= 5) { doStuffWithSecondRange(); } else if (/* myInterval >= 6 && */ myInterval <= 7) { doStuffWithThirdRange(); } else { doStuffWithAllOthers(); }
case
with expressions:JavaScript is unusual in that you can use expressions in the case
statement, so we can write the if...else if...else if
sequence above as a switch
statement:
switch (true){ case myInterval < 0: // I'm guessing this is an error break; case /* myInterval >= 0 && */ myInterval <= 2: doStuffWithFirstRange(); break; case /* myInterval >= 3 && */ myInterval <= 5: doStuffWithSecondRange(); break; case /* myInterval >= 6 && */ myInterval <= 7: doStuffWithThirdRange(); break; default: doStuffWithAllOthers(); }
I'm not advocating that, but it is an option in JavaScript, and there are times it's useful. The case
statements are checked in order against the value you give in the switch
. (And again, lower bounds could be omitted in many cases because they would have matched earlier.) Even though the case
s are processed in source-code order, the default
can appear anywhere (not just at the end) and is only processed if either no case
s matched or a case
matched and fell through to the default (didn't have a break
; it's rare you want to do that, but it happens).
If your functions all take the same arguments (and that could be no arguments, or just the same ones), another approach is a dispatch map:
In some setup code:
var dispatcher = { 0: doStuffWithFirstRange, 1: doStuffWithFirstRange, 2: doStuffWithFirstRange, 3: doStuffWithSecondRange, 4: doStuffWithSecondRange, 5: doStuffWithSecondRange, 6: doStuffWithThirdRange, 7: doStuffWithThirdRange };
Then instead of the switch:
(dispatcher[myInterval] || doStuffWithAllOthers)();
That works by looking up the function to call on the dispatcher
map, defaulting to doStuffWithAllOthers
if there's no entry for that specific myInterval
value using the curiously-powerful ||
operator, and then calling it.
You can break that into two lines to make it a bit clearer:
var f = dispatcher[myInterval] || doStuffWithAllOthers; f();
I've used an object for maximum flexibility. You could define dispatcher
like this with your specific example:
var dispatcher = [ /* 0-2 */ doStuffWithFirstRange, doStuffWithFirstRange, doStuffWithFirstRange, /* 3-5 */ doStuffWithSecondRange, doStuffWithSecondRange, doStuffWithSecondRange, /* 6-7 */ doStuffWithThirdRange, doStuffWithThirdRange ];
...but if the values aren't contiguous numbers, it's much clearer to use an object instead.
The ranges in this example are pretty small, but here's how one can handle larger ranges, per the JavaScript MDN Docs:
// The value we'll be evaluating: let code = 100; // Matches for any case where the expression === `true`: switch (true) { case code <= 64: return "Your number is 64 or less!"; break; case code >= 65 && code <= 90: return "Your number is in the range of 65-90!"; break; case code >= 97 && code <= 122: return "Your number is in the range of 97-122!"; break; case code >= 123: return "Your number is 123 or greater!"; break; default: break; }
I know that this style was already shown by T.J. Crowder via Use case
with Expressions, but I just wanted to show another example of how to utilize this same method. I just did this and had thought maybe another example might help someone, as I was still a little confused after reading other replies.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With