Using If Statements | Learn How to Program Using Any Web Browser

If statements are used to conditionally execute, or process, code. The conditional code is only executed if the condition evaluates to the Boolean value true.

JavaScript has three forms of the if statement. The first is simply as follows:

 if (condition)     statement;

In this form of the if statement, the statement executes if the condition is true.

The second form adds an else statement. The else statement executes if the condition is false (implying that the first statement hasn’t been executed):

 if (condition)     statement 1;  else     statement 2;

It’s important to understand that any statement within an if statement can be replaced by multiple statements using curly braces to create statement blocks as explained toward the end of Chapter 2, “ Understanding Types, Variables, and Statements.”

In general, it’s good programming practice to use curly braces with your if statements to make them easier to read and unambiguous. Using curly braces, the second form of the if statement would look like this:

 if (condition)     {       statement 1;       ...       statement n;     }  else     {     statement n+1;     ...     statement n+m;     }

So, Who Is George Boole, Anyway?

Who is George Boole, and why name the Boolean value type after him? Boole, a nineteenth-century British mathematician, formulated an “algebra of logic” that can be used to mathematically calculate logical values using equations such as X = 1 to mean that the proposition X is true and X = 0 to mean that X is false. The 1 and 0 used in these logical equations is analogous to the true and false values used in modern programming languages.

The third form of the if statement adds else if clauses. You can use this when you have multiple conditions you need to cover. The general form is as follows:

 if (condition)     {       statement 1;       ...       statement n;     }  else if (condition2)     {      statement n+1;      ...      statement n+m;     }  else if (condition3)     {      statement n+m;      ...      statement n+m+q;     }  else    {      // all the other conditions have failed      statements;    }

The equivalent processing could have been achieved without the else if statement using nested if else statements. (As an exercise, try and see how this is so!) However, else if makes the statement clearer and less likely to contain bugs.

To Create an If Statement:

Do it Right!

Create the scaffolding for the if statement. Experienced programmers have found that you’re far less likely to introduce hard-to-find bugs if you first get the structure of conditional statements right. Make sure to use indentation to clarify which statement blocks go with which conditions. For example:
```
 if ()     {     }  else if ()     {     }  else     {     } 
```
Add a comment before the beginning of the if statement that says what the if statement does:
```
 /* Tests to see whether a lowercase string is     greater than, equal to, or less than     the same string in uppercase characters.     "HOGWARTS" and "hogwarts" are the test strings. */ 
```
In this case, we’re testing to see how JavaScript ranks, or orders, lowercase and uppercase strings. (You may be surprised at the results!)

Add conditional expressions into the parentheses:

 ...  if ("hogwarts" > "HOGWARTS")     {     }  else if ("hogwarts" == "HOGWARTS")  ...

Add the statements that are to be conditionally executed within the curly braces. Listing 3-4 shows the complete code.

Listing 3.4: Determining Whether Lowercase or Uppercase Strings Are “More Equal” Using an If Statement

 <HTML> <BODY> <H1> <SCRIPT>     /* Tests to see whether a lowercase string is     greater than, equal to, or less than     the same string in uppercase characters.     "HOGWARTS" and "hogwarts" are the test strings. */     if ("hogwarts" > "HOGWARTS")        {         // lower case wins         document.write("Lower case is greater than upper case!");        }     else if ("hogwarts" == "HOGWARTS")        {         // cases the same         document.write("They are the same!");        }     else        {        // upper case wins        document.write("Upper case is greater than lower case!");        }     </SCRIPT> </H1> </BODY> </HTML>

Open the HTML page containing the program in a browser, as shown in Figure 3-4.

Figure 3-4: Using an if statement to test how JavaScript orders lowercase and uppercase strings

Tip

It might seem easier to cobble if statements together on an ad-hoc basis without first creating the scaffolding. But as these statements get complex, you’ll find you save a great deal of time by creating the structure of the statement first.