JavaScript If...Else Statement

In this tutorial

The if statement
The if...else statement
The else...if statement

The if Statement in JavaScript

The if statement is one of the simple JavaScript conditional statements. The syntax of if statement is:

Syntax:

if (expression)
   statement;

• The expression is any valid JavaScript expression, also known as conditional expression.
• The expression evaluates to either truthy(true) or falsy(false).
• Statement is only executed if expression is true.

Code Example:

if ( 10 > 7 )
   console.log("Condition is true, 10 is greater than 7");

//Output: Condition is true, 10 is greater than 7

The expression 10 > 7 is evaluated and the message is only displayed when the result of the expression is true. As 10 is greater than 7, the statement is executed and message is displayed.

In the above example only one statement is executed, if the expression is true. A code block with multiple statements may also be executed enclosed in curly braces { }.

Syntax:

if(expression)
{
  statement 1;
  statement 2;
  statement 3;
}

Let’s try if condition with block of multiple statements.

let x = 10;
if(x > 7) {
  console.log("Condition is true");
  return;
}

In the above example, x is greater than 7, result is true. In this case, the block of code enclosed in braces { } is executed.

In general, it is a good practice to always use { }, even there is one statement.

The if else Statement in JavaScript

In the above section, you learned about if statement, where one statement or block of statements is executed if expression is true. What if you want to execute a specific statement or block of statements in case expression is false. The if-else statement solves such problems. The syntax of the if-else is:

Syntax:

if(expression)
   statement1;
else
   statement2;

The JavaScript if-else statement has following flow:

• If the expression is true, only the statement or block of statements following the if keyword is executed.
• If the expression is false, the control is transferred to statement or block of statements following the else keyword.

let price = 200;
if (price > 500){

   // This statement is executed, if expression is true
   Console.log("Condition is true");
}
else{

   // This statement is executed, if expression is false
   console.log("Condition is false");
 }

//Output: Condition is false

In the above example, value of variable price is 200. The expression is evaluated to false. The control is transferred to statement following the else keyword. In this case text “Condition is false” is printed.

The else if Statement in JavaScript

There are certain cases where you need to check another condition, when first if condition is false. You can do that and write it with a space between else and if.

You can nest multiple else if blocks.

let marks = 75;

if (marks > 90){
  console.log("A Grade");
}else if (marks > 80){
  console.log("B Grade");
}else if (marks > 70){
  console.log("C Grade");
}else if (marks > 60){
  console.log("C Grade");
}else{
  console.log("Fail");
}  

Here is the sequence of code flow:

• Value 75 is assgined to variable marks.
• The first if condition is evaluated, the result is false as 75 is not greater than 90.
• Control is transferred to next else if. Condition is evaluated, the result is false as 75 is not greater than 80.
• Control is transferred to next else if. Condition is evaluated, the result is true as 75 is greater than 70.
• "C Grade" is printed on console.
• Once any else if condition is true, rest of the else if and else statements are skipped.

Let's consider another example.

let marks = 75;

if (marks > 90) {
  console.log("A Grade");
} else if (marks > 80) {
  console.log("B Grade");
} else {
  console.log("Your Grade is below B Grade");
}

In this case, the sequence of code flow is:

• Value 75 is assgined to variable marks.
• The first if condition is evaluated, the result is false as 75 is not greater than 90.
• Control is transferred to next else if. Condition is evaluated, the result is false as 75 is not greater than 80.
• As first if and following all else if conditions are false, control is transferred to else. 
• "Your Grade is below B Grade" is printed on console.

This shows that block of statements associated with else is only executed when first if and all else if conditions are evaluated to false.