• Home
  • »
  • Working with conditional statements

Working with conditional statements

A conditional statement uses conditional logic to determine what programming statements to execute. By using some conditional logic (a process of checking conditions), we determine if a certain condition is true or false. If the condition is true, we execute some part of the program. Otherwise, if the condition is false, we use some other part of the program.

To create a condition in JavaScript, we need to write a conditional statement with a comparison operator. (JavaScript also supports logical operators to create complex conditions.) A comparison operator compares the value of one element with that of another. An expression that uses a comparison operator is referred to as a Boolean expression. A Boolean expression evaluates to either true or false.

Let's consider an example to simplify how to create a conditional statement. Suppose we want to write a small program in JavaScript to determine if 5 is less than 6. To answer that question, we will use an IF statement. In JavaScript, the general syntax for creating an IF statement is:

if (condition) {
some JavaScript code
}

An IF statement starts with the word "if"; next, the condition(s) is listed in parenthesis. After the opening curly brace ( { ), you list the code that you want to execute if the condition is true. All statements, before the closing brace (}), will be executed if the condition is true. If the condition is false, all the statements inside the IF statement will be skipped, not executed.

Let's write an IF statement that to evaluate whether 5 is less than 6. See the following code:

if (5 < 6) {
document.write ("<br>Condition is true : 5 is less than 6");
}

On line 1 above, we start our IF condition that says check if 5 is less than 6. The less than operator is a comparison operator. On line 2, we have a print statement that will be executed if the condition is true. On line 3, we end our if statement with the closing curly brace. In our IF statement above, 5 < 6 is a Boolean expression because it can be evaluated to either true or false. We know this expression is true so line 2 will be executed. Here is the complete example:

<script language="javascript">
document.write ("checking if 5 is less than 6.......");
if (5 < 6) {
document.write ("<br>Condition is true : 5 is less than 6");
}
document.write ("<br>Done checking");
</script>

Here is the output of the above code:

As we mentioned before, any statements inside an if block are executed only when the condition is true or is met. Because our condition (5 < 6) is true, the statement inside the IF block is executed to print "Condition is true : 5 is less than 6". The other print statements (outside of IF block) will execute regardless of the result of the Boolean expression.

In the following example, our Boolean expression evaluates to false (i.e., the condition is false or not met):

if (5 > 6) {
document.write ("<br>Condition is true : 5 is less than 6");
}

So why would the Boolean expression be false in the above example? Well, look closely at our condition. It says if 5 is greater than 6 then execute the statement inside the IF block. We know 5 is not greater than 6, so our Boolean expression (our condition) will evaluate to false. Thus the statement "Condition is true : 5 is less than 6" won't be printed.

Usually, when a condition is false, we want to execute some other code. For instance, suppose we ask the user to an integer, representing his/her age in years. If we get a valid number, we would use that number in our program. (In other words, our IF condition will be true so statements inside the IF block will be executed.) Otherwise, assume our program cannot use an invalid input. So if it is an invalid input we will again ask the user to enter a valid number. (This part of the code will be added with an ELSE block to the IF block.) Note any code outside of an IF block will be executed whether the condition is false or true.

To recap, any statements that you want to execute when the condition is true, place them inside the IF block; any statements that you want to execute when the condition is false, place them in an ELSE block. Look at the following example

if (5 > 6) {
document.write ("Condition is true : 5 is less than 6");
}
else {
document.write ("Condition is false : 5 is not greater than 6");
}

So in this example, we are saying check if the 5 is greater than 6. If it is true, then, execute line 2; otherwise, execute line 5: document.write ("<br>Condition is false : 5 is not greater than 6");. Because 5 is not greater than 6, our condition is false and the statement inside the ELSE block will be executed. The following shows the output of the above code:

You could also create two separate IF statements instead of using an ELSE clause, but this is not desirable especially when there are many conditions to check as that will require extra computing power.