4/22/2015

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

1 comment :

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance the knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got a good knowledge.
    Php course in chennai

    ReplyDelete