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

7 comments :

  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
  2. Thanks for sharing the details! thanks for sharing information,nice article.
    i would like to more information from your side!
    please added more then tips!Am working in
    websphere training in hyderabad

    ReplyDelete
  3. 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
  4. I feel extremely cheerful to have seen your site page and anticipate such a large number of all the more engaging circumstances perusing here. Much appreciated yet again for every one of the points of interest. Initial You got a awesome blog. I determination be involved in plus uniform minutes. I view you got truly very functional matters. I determination be always checking your blog blesss. oil tank removal

    ReplyDelete