Javascript: How to use less than or greater than ranges in a Switch ... Case statement

There are several ways to make decisions in Javascript.
Basically, you have a value and a test.
The value could be a number (999) or a string ("female") or boolean (true).
The test is always going to be, "Is it true that the value is this condition?"

• Is the number 999?
• Is the string "female"?
• Is the boolean true?

Some of the statements you have available are:

• if (value == test)
• if (value == test) ... else
• if (value == test) ... else if (value == test) 
• switch (value) ... case (test) ... default

The switch condition statement in Javascript lets you perform an action based on the value of a particular thing. Depending on your preferences, the switch statement may provide better understanding of your code than a series of if () ... else if () ... else if () ... else statements. For example, we'll sort some "food" into a few different types -- "fruit" or "vegetable" or "unknown":

var food = "cucumber";

switch (food) {

  case "banana":

    myType = "fruit";

    break;

  case "cucumber":

    myType = "vegetable";

    break;

  case "orange":

    myType = "fruit";

    break;

  case "carrot":

    myType = "vegetable";

    break;

  default:

    myType = "unknown";

}

alert (myType);

So, this should do a pop-up alert saying "vegetable";

Well, what if you are using numbers?

And the number you are using is not an exact value?

The number could be greater than, equal to or lower than a particular test value, right?

For example, we want to alert someone based on how much fuel is in their tank -- and the value we want to test is a percentage of the tank's fullness. Using switch on the tankFullnessPercentage won't work because we are only testing to see if a value is equal to the test value:

var tankFullnessPercentage = 8;

switch (tankFullnessPercentage) {

  case 0:

    output = "Your tank is empty";

    break;

  case 25: 

    output = "Your tank is nearly empty";

    break;

  case 50: 

    output = "Your tank is half empty";

    break;

  default: 

    output = "You have plenty of gas."

}

window.alert (output + " at " + tankFullnessPercentage + "%.");

This is going to alert the wrong message, because it will say "You have plenty of gas at 8%," when in reality, your tank is nearly empty.

Solution: How to Test for Greater Than or Less Than in a Switch Statement

What you want to test for is whether a condition is "true."

So, using the same example as above, we just need to change a couple of things around:

var tankFullnessPercentage = 8;

switch (true) {

  case (tankFullnessPercentage <= 0):

    output = "Your tank is empty";

    break;

  case (tankFullnessPercentage <= 25): 

    output = "Your tank is nearly empty";

    break;

  case (tankFullnessPercentage <= 50): 

    output = "Your tank is half empty";

    break;

  default: 

    output = "You have plenty of gas."

}

window.alert (output + " at " + tankFullnessPercentage + "%.");

So, this is the correct way to test for a range of values in a switch statement. At 8%, the alert will now say "Your tank is nearly empty at 8%."