Conditional Statemnts allow programmers to make their code execute different actions based on different conditions.
Conditional Statements give the JavaScript code you are writing the ability to make decisions or perform single or multiple tasks. These Conditional statements were borrowed from older, more polished languages like C, C++, and Java. Porting over the functionality of these very capable languages gives JavaScript a very polished set of useful and functionally correct tools which you, the developer, can work with.
A conditional statement uses the operators that were discussed in an earlier chapter. There are three conditionals used within the JavaScript language, which will be discussed in depth in the coming sections. They are as follows.
- The if and if / else Conditional Statements
- The else / if Conditional Statement
- The switch / case Conditional Statement
Each conditional satisfies a slightly different chunk of functionality needed to make very robust and powerful scripts. Each is implemented slightly different, with an eye toward being able to execute what the previous wasn't able to. Working hand in hand this way, the conditionals are able to perform some very impressive programming feats with a minimum of fuss and typing.
The If and If/Else Conditional Statements
The if conditional is used to perform an action "if" the condition is met. Examine the below syntax example to get a feel for how to build a simple if conditional.
if (expression)
statement;
The example shows the if keyword followed by an expression within brackets. Within these brackets are the conditions that must be met in order to execute the statement. If the condition is never met, the statement is never executed. Simply put, the expression must evaluate to true in order for the statement to be executed. Within this simple conditional are an infinite number of variations. Basically, you're letting the script make decisions based on the condition, the expression, you supply.
While performing an action if a value of true is returned from the expression is great, you will eventually have a need for something to happen if the expression evaluates to false. Assigning an action to the false output of the expression involves a very simple addition to the if statement given above. The else keyword is used to supply an action to be taken if the expression is false. Examine the syntax example below.
if (expression) {
statement If expression is True;
} else {
statement If expression is False;
}
The If and If/Else Conditional Statements:
Notice the addition not only of the else keyword and an additional statement, but also the use of the opening and closing curly braces - { } . The braces are used to encapsulate the true statement and the false statement, as well as divide the entire statement into its "if" and "else" sections. Notice also that the basic JavaScript syntax rules haven't been broken - a semi-colon is present after both the true statement and the false statement.
This is probably the most common of all of the many JavaScript statements. You'll use it often, so get a feel for it now. We'll examine a couple of working examples to help you get a feel for working with the if and if / else statement.
if (80<100)
document.write("The expression has evaluated to true!!");
You can see the basic if statement used very simply here. Notice the "less-than" operator used within the conditional expression - "80<100". This if statement simply states that if 80 is less than 100, the statement is considered to be true. Since 80 is actually less than 100, the document.write statement is written to the screen. If the conditional expression were "101<100" (which is read as "if 101 is less than 100"), then nothing would be written to the screen as the conditional expression would have evaluated to false. Use the if statement if you want something to happen only if the conditional expression evaluates to true.
If you'd like an action to be taken when the conditional expression evaluates to false as well as true, use the else addition to provide an action to be taken when the conditional expression returns a false value, as shown below.
if (101<100) {
document.write("The expression has evaluated to true!!");
} else {
document.write("The expression has evaluated to false!!");
}
The above if / else statement says that if 101 is less than 100, write the first document.write statement to the screen. If 101 isn't less than 100 the second document.write statement is written to the screen. Since 101 is not less than 100, the conditional expression returns false, and the second document.write statement ("The expression has evaluated to false!!") is written to the screen.
So now that you know the basic structure of the if and if / else statements, we'll delve into another aspect - nesting your if / else statements. This nesting structure is used when you have an initial condition to be met with a true or false value, then you require another set of conditions that you'd like to have tested to acquire your end result. Examine the below syntax example to understand more clearly what is meant by the term "nesting".
if (expression1) {
statement If expression1 is True;
} else {
if (expression2) {
statement If expression2 is True;
} else {
statement If expression2 is False;
}
}
You can see that the second if / else statement is nested within the "false" area of the first if / else statement. If expression1 evaluates to true, then the first document.write statement of the first if / else statement is written to the screen. If expression1 evaluates to false, then the second if / else statement is evaluated. If expression2 evaluates to true, the first document.write statement of the second if / else statement is written to the screen. If expression2 evaluates to false, then the second document.write statement of the second if / else statement is written to the screen. This somewhat complicated (but very useful) method will be used widely within your future JavaScript coding.
To illustrate further, I'll use the nesting of if / else statements in a couple of working examples, shown below.
if (99<100) {
document.write("Expression1 has evaluated to true!!");
} else {
if (80<100) {
document.write("Expression2 has evaluated to true!!");
} else {
document.write("Expression2 has evaluated to false!!");
}
}
The example shows the nesting of an if / else statement within another. The first if / else statement shows the less than operator being used to evaluate the weights of two numbers, 99 and 100. Since 99 is indeed less than 100, the conditional expression returns a value of true, and the first document.write statement ("Expression1 has evaluated to true!!") is written to the screen. The false section of the first if / else statement is never consulted, since the conditional expression of the first if / else statement evaluated to true. Examine the below example, which utilizes the decision making ability of the second, nested, if / else statement.
if (101<100) {
document.write("Expression1 has evaluated to true!!");
} else {
if (80<100) {
document.write("Expression2 has evaluated to true!!");
} else {
document.write("Expression2 has evaluated to false!!");
}
}
Since 101 is less than 100, and the conditional expression of the first if / else statement returns false, the second if / else statement is executed. Since 80 is less than 100, the conditional expression returns a value of true and the first document.write statement of the second if / else statement is executed, writing "Expression2 has evaluated to true!!" to the screen. Simple.
The else / if Conditional Statement
The else / if statement is used to make your script supposedly more readable. I don't concur, preferring to use the if / else structure in all of my scripting. It performs the same actions as does the if / else statement. Examine the syntax example given below.
if (101<100)
document.write("Expression1 has evaluated to true!!");
else if (80<100)
document.write("Expression2 has evaluated to true!!");
else
document.write("Expression2 has evaluated to false!!");
You can see that the curly braces required for the if / else statement aren't in attendance. They simply aren't necessary. The above script works the same as does an if / else statement nested within another if / else statement. So much for the else / if conditional statement.
The Switch/Case Conditional Statement
The switch / case conditional statement is used to test all of the possible outcomes for the application you are designing. Used with the case keyword, the switch statement can give you the control you require, with many actions possible instead of just the two given with an if / else statement. That is, you are not limited to a true or false answer to decide between only two actions. While the true or false decision is still used at a very basic level, you may have as many outcomes as you have a need for. Examine the syntax example, given below.
switch (expression) { case caseLabel: statement; break; case caseLabel: statement; break; case caseLabel: statement; break; default: statement; }
Notice the colons following the case and caseLabel keywords. This is absolutely required. Don't leave them out. Don't substitute the colons with semi-colons, or your script won't work. And don't forget the colon following the default keyword near the end of the script. The switch statement begins with, of course, the switch keyword. Within the brackets following the switch keyword is the expression, which is used to set the parameter that the rest of the script will use as the data to be used to make a decision. Once this decision is made, the script looks for a match among the various case keywords. Each case keyword has a unique caseLabel associated with it. This is used to define each case statement as a unique and individual entity to your script. Once a case with the matching caseLabel is found, the statement within the case statement is executed. On the end of the switch statement, you'll see that a "default" keyword was used, with a statement of its own given. This default statement is executed when none of the given cases match the expression given in brackets following the switch keyword. Notice also that break; statements were used. The break statements used in this way are required to "break" out of the switch / case structure and go on to further actions. It is required so that the rest of the case options below the selected case (as well as the default actions) aren't executed. To further illustrate the concept, examine the following working example which utilizes the switch / case statement.
var varOne = 100; switch (varOne) { case 90: document.write("The value of varOne is 90"); break; case 100: document.write("The value of varOne is 100"); break; case 110: document.write("The value of varOne is 110"); break; default: document.write("The value of varOne is unKown"); }
The example shows the declaration of a variable, varOne. varOne contains a number, which is 100. This varOne variable is then used as the expression of the switch statement. Now that the script has the expression with to find a match, the several cases given are searched until a case is found that matches the varOne value, which is 100. Since the second label matches the varOne value given as the expression, the statement within that case statement is executed, which is a document.write statement which writes the words "The value of varOne is 100" to the screen.
It should be noted that you aren't limited to using a variable with a static, unchanging value. You may use a variable that changes dynamically with either user driven or script driven actions associated with it to obtain a changing value.
