If Statement

Hi all, Today we are going to discuss about if statements.
In real life, most of time we have to take decisions based on conditions.
eg : If today is a rainy day, I will take umbrella.
       If teacher is absent today, I will come home early.

Conditions in programming is same as real life. A part of code will be executed, if the condition is true. If it is false we can skip it and just go ahead.

       

 Figure 1

This flow chart shows how the if else statement works.

We are going to discuss about 3 forms of JavaScript if...else statement in this tutorial.

1. if statement
2. if...else statement
3. if...else if... statement
4. nested if statement

if Statement

Syntax

 if (condition){

   code to be executed if condition is true

}

In here, if the condition is true, the code is executed and if it is not true, we can just go ahead and skip the code. Let's look at example.  Most of the times, you will use comparison operators while making decisions.

Example 1

Figure 2

 In here, first we assigned Friday to variable called 'day'. Then in if statement we check whether the day variable is equal to Friday. To check this == operator is used.  We can go into curly brackets if the condition is true. That means the condition inside the curly bracket is executed if the condition is true only. In this example, condition is true, so the line inside the curly brace is executed. The output is shown below. 

Figure 3

if...else 

Syntax

if (condition){

   code to be executed if condition is true

}
else{
 code to be executed if the condition is not true
}

In if statement, if the condition is not true, there isn't any statement to be executed. Codes to be executed will be skipped at that time. But in if...else statement, if the code is not true,  then the given statement(s) in the else block are executed.

Example 2

Figure 4

In here, Tuesday is assigned to variable day. Then, the condition is checked whether the day is equal to Friday. Since the day is Tuesday, this condition becomes false. So, if statement is skipped and lines of else condition are executed. So the result is shown below.

Figure 5

           

if...else if... Statement      

This allows JavaScript to take correct decision out of several conditions.

Syntax

if(condition 1){

   statement(s) to be executed if condition 1 is true

}

else if(condition 2){

   statement(s) to be executed if condition 2 is true

}

else if(condition 3){

   statement(s) to be executed if the condition 3 is true

}

else{

   statement(s) to be executed if no condition is true

}

In here, first condition 1 is checked whether it is true. If it is true, the given statement(s) of if block are executed. If it is not true, then  condition 2 is checked. If it is not true, then condition 3 is checked. If there isn't any condition true, then the statement(s) of else block is checked.

Example 3

Figure 6

In here, 68 is assigned to variable 'marks'. Condition 1 is checked first. Since the marks is not greater than 75, the condition becomes false. So, then checked the condition 2. Since marks are greater than 60, the condition becomes true. So the statement inside that block is executed. 

So the result is shown below.

Figure 7

nested if

This is not much different than others. In here we can write if statement inside another if statement.

Figure 8

In here we assigned 100 to variable 'marks'. In first condition, marks is checked whether it is greater than 100. Since marks is 100, the condition is true, therefore then the codes inside the block are executed. So, then check the marks whether it is equal to 100 or not. Since the condition is true, statement inside that block is executed. Now let's see the results.

Figure 9

You can change the marks see the results. Hope you will understand this tutorial.