Home » Tutorials » Learn Javascript » JavaScript If Else Statement

Learn Javascript

 Prev

JavaScript If Else Statement

If-Else statement in JavaScript (also called conditionals) evaluate a certain condition and after that condition is met or fulfilled, they do some specific task.

In everyday life, we perform actions based on certain conditions all the time. Some Examples would be:

  • If it is “raining outside” 🌧, we “take an umbrella” ☔.
  • If we are “hungry in the morning” 😋, we “cook and have breakfast” 🥞.
  • If our “grades are below a certain level” 📉, we “get an F” 😭.

Here, “raining outside”, “hungry in the morning” and “grades are below a certain level” are the conditions and “take an umbrella”, “cook and have breakfast”, “get an F” are the actions performed based on the conditions.

Similarly when we are writing code in JavaScript, we come across certain conditions and only after those conditions are met, we want to perform certain tasks. This is possible by using the If-Else statement in JavaScript.

In this lesson, we’ll be explaining the given statements:

The If Statement 🤔

The If statement checks whether a certain condition is true, then it performs a certain task. It’s syntax is given below:

if (condition) {
   // this block runs only when the condition given above is true
}

The statement inside the paranthesis ( ) is called the condition.

  • If the condition is true, then the code inside curly braces { } will run.
  • If the condition is false, then the code inside curly braces { } will not run.

Note: The “if” statement should always be in lowercase and should not be written as “IF” or “If”.

Example

if (true) {
   console.log('This message will be displayed.');
}
if (false) {
   console.log('This message will not be displayed.');
}

Output

This message will be displayed.

Some more examples with conditional operators

You can check out our JavaScript Operators lesson for more info on operators.

var number = 5; // Assigning 5 to a variable called 'number'

// This will run
if (number === 5) {
   console.log('Number is equals to 5.');
}
// This will not run
if (number > 10) {
   console.log('Number is greater than 10.');
}
// This will run
if (number < 10) {
   console.log('Number is less than 10.');
}

Output

Number is equals to 5.
Number is less than 10.

The JavaScript If…Else Statement ⚡

The else statement runs when the condition inside the if statement is false. The else statement is optional which means that we don’t need to pair it with the if statement every single time.

So, when we actually need to do something after the condition inside if statement is false, we use the else statement. It’s syntax is given below:

if (condition) {
   // this block runs only when the condition given above is true
} else {
   // this block runs only when the condition given above is false
}

Note: Just like the “if” statement, the “else” statement should always be in lowercase and should not be written as “ELSE” or “Else”.

Example

if (false) {
   console.log("If block message will not be displayed.");
} else {
   console.log('Else block message will be displayed.');
}

Output

Else block message will be displayed.

Some more examples with conditional operators

var number = 4; // Assigning 4 to a variable called 'number'

if (number === 5) {
   console.log('Number is equals to 5.');
} else {
   console.log('Number is not equal to 5.');
}

if (number > 2) {
   console.log('Number is greater than 2.');
} else {
   console.log('Number is not greater than 2.');
}

Output

Number is not equal to 5.
Number is greater than 2.

The If…Else If Statement 🤯

The else if statement runs if it’s preceding if statement’s condition is false. We use else..if when we want to check another condition immediately after if statement’s condition is false. It’s syntax is given below:

if (condition1) {
   // this block runs only when condition1 is true
} else if (condition2) {
   // this block runs only when condition1 given above is false and then condition2 is true
} else {
   // this block runs when both of condition1 and condition2 are false
}

Example

if (false) {
   console.log("If block message will not be displayed.");
} else if (true) {
   console.log('Else If block message will be displayed.');
} else {
   console.log('Else block message will not be displayed.');
}

Output

Else If block message will be displayed.

Some more examples with conditional operators

var age = 16; // Assigning 18 to a variable called 'age'

if (age >= 18) {
   console.log('You are qualified to drive.');
} else if (age === 16) {
   console.log('You are a teenager but not qualified to drive.');
} else {
   console.log('You are qualified to drive.');
}

var number = 100;
if (number > 100) {
   console.log('Number is greater than 100.');
} else if (number < 100) {
   console.log('Number is less than 100.');
} else {
   console.log('Number is equal to 100.');
}

Output

You are a teenager but not qualified to drive
Number is equal to 100

In this way, If-Else statement helps us solve the problem of conditional execution of code. When you are programming, you will come across multiple situations where you have to check certain conditions and then think about what to do next when those conditions are met.

Next