Branching Statements in JavaScript

In this tutorial, we will learn about different Branching statements in JavaScript. Like other programming languages JavaScript also has Branching statements that allow us to add conditions in our Code. For Example, you want to add a condition where a user can only submit a form if He/She adds 10 digits to the mobile number. If someone tries to provide the wrong mobile number(less than 10 digits) they would be not allowed to submit the form.

There are mainly four kinds of branching statements available in JavaScript. These branching statements are as follows.

• If Statement
• If else Statement
• Else if Statement
• Switch Statement

Now we will check all these branching statements in detail.

If Statement: 

We use the if statement when we want to run a piece of code only if a certain condition is true. Please check out the syntax of the if statement.

if(condition)
{
    //Set of statements to be executed if the condition
    //will be true, and skipped in case of false condition
}

To understand the statement please check the following example program. In the following program, we check the num variable’s value in the if statement. If the value of the num variable will be equal to 10 then it will show message num is equal to 10. 

<script>  
var num=10;  
if(num==10){  
document.write("num is equal to 10");  
}  
</script>

To understand the flow of the if statement. Please check out the following flow chart diagram of the if statement.

If else Statement:

We use an if-else statement in case we want to run separate pieces of code for both conditions(true and false). In the if-else statement, in the case of the true condition if block will run, and in the case of false condition else block will run. Please check out the syntax of the if-else statement.

if(condition)
{
  //Statements to be executed in case of the true condition.
}
else
{
  //Statements to be executed in case of the false condition.
}

Please check out the following program under the if-else statement more wisely.

<script>  
var num=5;  
if(num%2==0){  
document.write("num is even number");  
}  
else{  
document.write("num is odd number");  
}  
</script>

To understand the flow of the if-else statement. Please check out the following flow chart diagram.

Else if Statement:

We use an else if statement in case we have multiple conditions and we want to run a piece of code from the block where the condition would be true. The construct is also known as a ladder. In this statement, the if statement is followed by n number of else if statements and at last an else statement comes after the required number of else if statements. Please check out the following syntax of the else if statement.

if(condition){
  //Statements to be executed in case of true condition in if statement.
}
else if(condition)
{
  //Statements to be executed in case of true condition in this particular else if statement.
}
else
{
  //Statements to be executed in case all conditions in the above statements(if and else if) are false.
} 

Please check out the following program which allows checking students’ grades using else if condition.

<script>  
var marks=75;  
if(marks>=80){  
document.write("Grade A");  
}  
else if(marks>=60){  
document.write("Grade B");  
}  
else if(marks>=40){  
document.write("Grade C");  
}  
else{  
document.write("Fail");  
}  
</script>

To understand the flow of the else-if statement. Please check out the following flow chart diagram.

Switch Statement:

We use a switch statement in case we have multiple choices. In the case of the switch statement, it tasks an expression and matches this expression will all available cases in the statement. Please check out the following syntax of the switch statement.

switch(expression)
{
case 1:
   //Statements
break;
case 2:
   //Statements
break;
case n:
   //Statements
break;
default:
   //Statements
}

Please check out the following example program of the switch statement.

<script>  
var num=1;  
var result;  
switch(num){  
case 1:  
document.write("Red");   
break;  
case 2:  
document.write("Green");
break;  
case 3:  
document.write("Blue");
break;  
default:  
document.write("Black"); 
}    
</script>

To understand the flow of the switch statement. Please check out the following flow chart diagram.