Getting Good with JavaScript - Andrew Burgess [8]
If Statements
Pretend for a moment that we're building an app that must output the century a given year is in.
Example 2.17
var year = 2011, msg = "In the ";
if (year > 2000) {
msg += "twenty-first century";
} else {
msg += "twentieth century";
}
console.log(msg); // In the twenty-first century
This is an if-statement. We start with the keyword if. Then, there's the condition inside parentheses. This is where true or false values and operators that return Booleans come into play. They'll determine which statement runs.
We haven't said much about statements yet. In an if-statement, the statement consists of all the lines of code between the opening and closing curly braces. In our example, that's only one line, which appends the century name to the string msg. Then, notice another statement after that one: the else-statement. This will only be executed if the condition before it evaluates to false.
But let's say we're doing something more than a true/false deal. It's not hard to do more:
Example 2.18
var year = 11, msg = "In the ";
if (year > 2000) {
msg += "twenty-first century";
} else if (year > 1900) {
msg += "twentieth century";
} else {
msg += "very distant past.";
}
console.log(msg); // In the very distant past
As you can see, multiple if-statements are no big deal. In place of the else-statement, just put another if-statement. Bump that if right up against the else, add a second condition inside parenthesis, and you're off. Of course, this could go on indefinitely; there's no limit to the number of else if statements you can use.
Switch Statements
However, let's say we're checking something with several options, like the size of coffee a customer wants. We'd have to do something like this:
Example 2.19
var order_size = "medium";
if (order_size === "small") {
alert("small");
} else if (order_size === "medium") {
alert("meduim");
} else if (order_side === "large") {
alert("large");
} else if (order_side === "extra large") {
alert("extra large");
} else {
alert("something else?");
}
Now, I don't know about you, but that last snippet seems like a lot of needless repetition to me. Here's what you can do instead: use a switch statement.
Example 2.20
var order_size = "medium";
switch (order_size) {
case "small":
alert("small");
break;
case "medium":
alert("medium");
break;
case "large":
alert("large");
break;
case "extra large":
alert("extra large");
break;
default:
alert("something else?");
}
Let me introduce you to the switch statement. It's the perfect substitute for long-winded, nested if/else statements. With the switch statement, you only write the expression to evaluate once; it goes in parentheses at the top, right after the keyword switch. Then we open a set of curly braces.
We want to do something based on the evaluation of that expression, so we have any number of cases. The keyword case is followed by the value that we want the expression to match. In this example, the expression order_item is compared to each of the coffee sizes. The compared value is then followed by a colon. Next are the lines of code that will be executed if the expression matches the case; if this is only one line, feel free to put it on the same line as the case "value": part, if you like. It doesn't matter at all, because JavaScript doesn't care about spacing. Don't forget to end your case block with the break; line. This prevents our case statements from falling through; we'll see what this means in a second.
But first, don't forget about the default: piece at the end; yup, you guessed it: it's the equivalent of an else. It executed when we don't match any of the cases.
So, back to falling through: if we didn't include the break; statement, the code for any case statements under the one we match will also