6.3 if

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

if (expression)

    statement

In this form, expression is evaluated. If the resulting value is true or can be converted to true, statement is executed. If expression is false or converts to false, statement is not executed. For example:

if (username == null)       // If username is null or undefined,

    username = "John Doe";  // define it

Or similarly:

// If username is null, undefined, 0, "", or NaN, it converts to false, 

// and this statement will assign a new value to it.

if (!username) username = "John Doe";

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

As mentioned in the previous section, 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.");

}

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 have been written all on one line. 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 expression is false. Its syntax is:

if (expression)

    statement1

else

    statement2

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

if (username != null)

    alert("Hello " + username + "\nWelcome to my home page.");

else {

    username = prompt("Welcome!\n What is your name?");

    alert("Hello " + username);

}

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 actually interprets the previous example 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");

}

Although it is not the style used in this book, many programmers make a habit of enclosing the bodies of if and else statements (as well as other compound statements, such as while loops) within curly braces, even when the body consists of only a single statement. Doing so consistently can prevent the sort of problem just shown.