Tutorial Gateway

JavaScript Nested If

by

Placing If Statement inside another IF Statement is called JavaScript Nested If Statement. The JavaScript Else Statement allows us to print different statements depending upon the expression result (TRUE, FALSE). Sometimes we have to check even further, when the condition is TRUE. In these situation, we can use JavaScript Nested IF statements but be careful while using it.

For example, every person is eligible to work if he is 18 years old or above else he is not eligible but companies will not give job to every person. So, we use another If Statement (Also called as JavaScript Nested If Statement) to check his education qualifications or any specific company requirements.

JavaScript Nested If Syntax

The Nested If in JavaScript programming language Syntax is as follows:

if ( test condition 1)
{
 
   //If the test condition 1 is TRUE then these it will check for test condition 2
   if ( test condition 2)
   {
    //If the test condition 2 is TRUE then these statements will be executed
    Test condition 2 True statements;
   }

   else
   {
    //If the c test condition 2 is FALSE then these statements will be executed
    Test condition 2 False statements;
   }

else
{
 //If the test condition 1 is FALSE then these statements will be executed
 Test condition 1 False statements;
}

Flow Chart for JavaScript Nested If

Let us see the JavaScript Nested If flow chart for better understanding.

FLOW CHART For Nested If in C Programming

If the Test Condition1 is FALSE then STATEMENT3 will execute. If Test Condition1 is TRUE then it will check for the Test Condition2, if it is TRUE then STATEMENT1 will execute or else STATEMENT2.

JavaScript Nested If Example

In this JavaScript Nested If example program, We will declare variable age and store default value.

If the age is less than 18 we are going to print 2 statements. When the condition fails we will check one more condition (Nested) and if it succeed we print something. If the nested condition fails we print some other thing.

<!DOCTYPE html>
<html>
<head>
    <title> JavaScript Else Statement </title>
</head>
 <h1> JavaScript Else Statement </h1>
<body>
<script>
  var age = 15;
  if( age < 18 )
  {
    document.write("<b> You are Minor. </b>"); 
    document.write("<br\> Not Eligible to Work " ); 
  }
  else
  {
    if (age >= 18 && age <= 60 )
    {
        document.write("<b> You are Eligible to Work. </b>");
        document.write("<br\> Please fill in your details and apply " ); 
    }
    else
    {
        document.write("<b> You are too old to work as per the Government rules </b>");
        document.write("<br\> Please Collect your pension!" );    
    }
  }
</script>
</body>
</html>

ANALYSIS

In this JavaScript Nested If statement example, If the person age is less than 18 then he is not eligible to work. If the person age is greater than or equal to 18 then first condition fails, it will check the else statement.

Within the Else statement there is another if condition (this is called as Nested If).

  • JavaScript Nested IF Statement will check whether the person age is greater than or equal to 18 and less than or equal to 60. If the condition is TRUE then he can apply for the job.
  • If the condition is FALSE then he is too old to work as per the government.

OUTPUT 1: Here the age is 15. First If condition is TRUE that’s why, statements inside the If Statement is displayed as Browser output

JavaScript Nested If Statement 1

2nd OUTPUT: Here we changed the age to 25. First If condition is FALSE. Nested IF condition is TRUE that’s why, statements inside the Nested If Statement is displayed as Browser output

JavaScript Nested If Statement 2

OUTPUT 3: Here we changed the age to 61. Both If condition and also Nested IF condition failed here. So, statements inside the Nested Else Statement is displayed as Browser output

JavaScript Nested If Statement 3