Javascript: The Definitive Guide

Previous Chapter 5 Next
 

5.3 if

The if statement is the fundamental "control statement" that allows JavaScript to "make decisions," or to execute statements conditionally. This statement has two forms. The first is:

if (expression) 
    statement

In this form, the expression is evaluated. If it is true, then statement is executed. If the expression is false, then statement is not executed. For example:

if (name == null)
    name = "John Doe";

Note that the parentheses around the expression are a required part of the syntax for the if statement. Although they look extraneous, they are actually a required part of the complete statement.

As mentioned above, we can always replace a single statement with a statement block. So the if statement might also look like this:

if ((address == null) || (address == "")) {
    address = "undefined";
    alert("Please specify a mailing address.");
}

Note that the indentation used in these examples is not mandatory. Extra spaces and tabs are ignored in JavaScript and since we used semicolons after all the primitive statements, these examples could be written all on one line if we wanted to. Using line breaks and indentation as shown here, however, makes the code easier to read and understand.

The second form of the if statement introduces an else clause that is executed when the expression is false. Its syntax is:

if (expression) 
    statement1
else
    statement2

In this form of the statement, the expression is evaluated, and if it is true, then statement1 is executed; otherwise statement2 is executed. For example:

if (name != null) 
    alert("Hello " + name + "\nWelcome to my home page.");
else {
    name = prompt("Welcome!\n What is your name?");
    alert("Hello " + name);
}

When you have nested if statements with else clauses, some caution is required to ensure that the else clause goes with the appropriate if statement. Consider the following lines:

i = j = 1;
k = 2;
if (i == j) 
    if (j == k)
        document.write("i equals k");
else 
    document.write("i doesn't equal j");    // WRONG!!

In this example, the inner if statement forms the single statement allowed by the syntax of the outer if statement. Unfortunately, it is not clear (except from the hint given by the indentation) which if the else goes with. And in this example, the indenting "hint" is wrong, because a JavaScript interpreter will actually interpret the above as:

if (i == j) 
{
    if (j == k)
        document.write("i equals k");
    else 
        document.write("i doesn't equal j");    // OOPS!
}

The rule in JavaScript (as in most programming languages) is that an else clause is part of the nearest if statement. To make this example less ambiguous and easier to read, understand, maintain, and debug, you should use curly braces:

if (i == j) 
{
    if (j == k) {
        document.write("i equals k");
    }
}
else { // what a difference the location of a curly brace makes! 
    document.write("i doesn't equal j");
}


Previous Home Next
Compound Statements Book Index while