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

9 comments :

  1. Starting impressions are significant yet similarly so is the limit of your logo to talk with clients of your business and to extend to them the nature of what you bring to the table. So once it comes to choosing your ideal logo configuration there is a great deal to consider! logo design service

    ReplyDelete
  2. The promotion around Big Data is only that, BIG. Despite the fact that Big Data is anticipated to be the future grain for all investigation. Data Analytics Course in Bangalore

    ReplyDelete
  3. Woh Everyone loves you , bookmarked ! My partner and i take issue in your last point. https://royalcbd.com/product/cbd-roll-on-gel/

    ReplyDelete
  4. Amazing Articles ! I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
    Data science course in pune

    ReplyDelete