JavaScript – Conditional Statements

You probably have heard of if-else-if statement. This is an example of conditional statement.

You use conditional statement to make your program perform different actions based on conditions.

For example, let’s assume a program that provided links to movies its users. So the program can first get the age of the user. Then it can provided links based on if theĀ  user is adult or minor.

Let’s now look at conditional statement in more detail.

 

We’ll consider three types of conditional statements. They are:

  1. if statement
  2. if-else statement
  3. if-else-if statement

 

Flow chart of if-else statement

The flowchart below shows how if-else statement works.

 

 

1. if statement

If statements is the basic form of conditional statement. You use it to make JavaScript execute (or not execute) a piece of code based on condition.

The syntax for if statement is:

 

if (conditional expression) {
    //code to execute if conditional expression is true
}
//continue execution from here if expression is false

 

From the above syntax:

First, the conditional expression is evaluated. If it results to true, then the code enclosed in braces is executed. If however the condition evaluates to false, then the code inside the curly braces is skipped and the execution continues with the following codes.

Let’s take an example:

 

<html>
<head><title>If Statement Example</title></head>
   <body>
   
      <script type = "text/javascript">
         <!--
            var score = 50;
         
            if( score > 30 ) {
               document.write("<b>The student passed</b>");
            }
         //-->
      </script>          
      
      You can try different values for score
   </body>
</html>

If you view the html page above, the output would be

 

The student passed

 

 

2. if-else statement

The if-else statement follows from the if statement. But in this case, you also provide a code to execute if the condition is false.

The syntax of if-else statement is:

 

if (conditional expression) {
    //code to execute if conditional expression is true
}
else {
    //code to execute if conditional expression is false	
}

 

An example is given below

 

<html>
<head><title>If Statement Example</title></head>
   <body>
   
      <script type = "text/javascript">
         <!--
            var score = 20;
         
            if( score > 30 ) {
               document.write("<b>The student passed</b>");
            }
	    else
	    {
               document.write("<b>The student failed</b>");			
	    }
         //-->
      </script>     
    
      You can try different values for score
   </body>
</html>

 

If you view this page, you will have the output:

The student failed

 

 

3. if-else-if statement

This type of conditional statement allows you to use two or more if-else statements. In this case, you provide different conditional statements along with codes to execute if any of them evaluates to true.

The syntax for this is given below:

 

if (conditional expression 1) {
   Statements to execute if conditional expression 1 is true
} else if (conditional expression 2) {
   Statement(s) to execute if conditional expression 2 is true
} else if (conditional expression 3) {
   Statement(s) to execute if conditional expression 3 is true
} else {
   Statement(s) to execute if no conditional expression is true
}

 

In the syntax, three conditions have been specified. However, it can be more.

In this example, if none of the condition is true, then the last statement is executed.

Let’s take an example.

 

<html>
<head><title>If Statement Example</title></head>
   <body>
   
      <script type = "text/javascript">
         <!--
            var score = 60;
            if( score > 50 ) {
               document.write("<b>Above Average</b>");
            } else if( score < 50 ) {
               document.write("<b>Below Average</b>");
            } else if( score == 50 ) {
               document.write("<b>Average</b>");
            } else {
               document.write("<b>Invalid Input</b>");
            }
         //-->
		 
      </script>     
    
      You can try different values for score
   </body>
</html>

 

In this case the output would be:

Above Average

This is because the condition (score > 50) evaluates to true.