InformIT: Sams Teach Yourself JavaScript in 24 Hours

The `if` Statement

One of the most important features of a computer language is the capability to test and compare values. This allows your scripts to behave differently based on the values of variables, or based on input from the user.

The if statement is the main conditional statement in JavaScript. This statement means much the same in JavaScript as it does in English—for example, here is a typical conditional statement in English:

If the phone rings, answer it.

This statement consists of two parts: a condition (If the phone rings) and an action (answer it). The if statement in JavaScript works much the same way. Here is an example of a basic if statement:

if (a == 1) window.alert("Found a 1!");

This statement includes a condition (if a equals 1) and an action (display a message). This statement checks the variable a and, if it has a value of 1, displays an alert message. Otherwise, it does nothing.

If you use an if statement like the preceding example, you can use a single statement as the action. You can also use multiple statements for the action by enclosing them in braces ({}), as shown here:

if (a == 1) {
   window.alert("Found a 1!");
   a = 0;
}

This block of statements checks the variable a once again. If it finds a value of 1, it displays a message and sets a back to 0.

Conditional Operators

While the action part of an if statement can include any of the JavaScript statements you've already learned (and any others, for that matter), the condition part of the statement uses its own syntax. This is called a conditional expression.

A conditional expression includes two values to be compared (in the preceding example, the values were a and 1). These values can be variables, constants, or even expressions in themselves.

Between the two values to be compared is a conditional operator. This operator tells JavaScript how to compare the two values. For instance, the == operator is used to test whether the two values are equal. A variety of conditional operators are available:

== (is equal to)
!= (is not equal to)
< (is less than)
> (is greater than)
>= (is greater than or equal to)
<= (is less than or equal to)

Combining Conditions with Logical Operators

Often, you'll want to check a variable for more than one possible value, or check more than one variable at once. JavaScript includes logical operators, also known as boolean operators, for this purpose. For example, the following two statements check different conditions and use the same action:

if (phone == "") window.alert("error!");
if (email == "") window.alert("error!");

Using a logical operator, you can combine them into a single statement:

if (phone == "" || email == "") window.alert("Something's Missing!");

This statement uses the logical Or operator (||) to combine the conditions. Translated to English, this would be, "If the phone number is blank or the email address is blank, display an error message."

An additional logical operator is the And operator, &&. Consider this statement:

if (phone == "" && email == "") window.alert("Both are Missing!");

This statement uses && (And) instead of || (Or), so the error message will only be displayed if both the email address and phone number variables are blank. (In this particular case, Or is a better choice.)

The third logical operator is the exclamation mark (!), which means Not. It can be used to invert an expression—in other words, a true expression would become false, and a false one would become true. For example, here's a statement that uses the Not operator:

if (phone != "") alert("phone is OK");

In this case, the ! (Not) operator is used as part of the not-equal operator, !=. This operator inverts the condition, so the action of the if statement is executed only if the phone number variable is not blank.

The `else` Keyword

An additional feature of the if statement is the else keyword. Much like its English equivalent, else tells the JavaScript interpreter what to do if the condition isn't true. The following is a simple example of the else keyword in action:

if (a == 1) {
   alert("Found a 1!");
   a = 0;
}
else {
   alert("Incorrect value: " + a);
}

This is a modified version of the previous example. This displays a message and resets the variable a if the condition is met. If the condition is not met (if a is not 1), a different message is displayed.

Using Shorthand Conditional Expressions | Next Section

Previous Section

The if Statement

Conditional Operators

Combining Conditions with Logical Operators

The else Keyword

The `if` Statement

The `else` Keyword