Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Podia.

else if – JavaScript

Length: 10 minutes

Summary

if/else if statement:

if (condition) {

} else if (otherCondition) {

} 

if/else if/else statement:

if (condition) {

} else if (otherCondition) {

} else {

}

Details

If you need to test other conditions after your if statement, you can add an else if statement.

Here’s an example of a conditional statement that includes an else if statement:

if (1 < 0) {
  console.log("This will not print out");
} else if (1 > 0) {
  console.log("The second condition is true");
}

In that example, the statement “The second condition is true” will print out. The first condition is not true, so the first block is skipped. The second condition is true, so the second block of code gets executed.

If the first condition was true, then the computer would run the code inside the if block and skip the else if block, even if the else if condition is true. You can see an example of this below.

if (1 > 0) {
  console.log("Only this statement will print out");
} else if (2 > 1) {
  console.log("This will not print out even though the condition is true");
}

Adding an else block

It’s possible to add an else block to the end after all of the else if blocks. In the example below, the last block of code is skipped because the second condition is true.

if (1 < 0) {
  console.log("The first condition is true");
} else if (1 > 0) {
  console.log("The second condition is true");
} else {
  console.log("Both conditions are false");
}

Multiple else if statements

You can have multiple else if statements. Here’s an example.

if (1 < 0) {
  console.log("The first condition is true");
} else if (1 > 0) {
  console.log("The second condition is true");
} else if (2 > 1) {
  console.log("The third condition is true");
} else {
  console.log("All conditions are false");
}

Remember, the computer will start with the first condition. If the first condition is true, all of the other blocks will be skipped. In the example above, the first condition is false, so the computer moves on to the second condition. The second condition is true, so the computer will run that log statement and skip the third condition and else block, even though the third condition is also true.

Demo

Exercises

Try the following statements in the console:

if (1 > 0) {
  console.log('The 1st condition is true');
} else if(2 > 1) {
  console.log('The 1st condition is false and the 2nd is true');
} else {
  console.log('Both conditions are false');
}

if (1 < 0) {
  console.log('The 1st condition is true');
} else if(2 > 1) {
  console.log('The 1st condition is false and the 2nd is true');
} else {
  console.log('Both conditions are false');
}

The output from the first if statement will be “The 1st condition is true”. The output from the second if statement will be “The 1st condition is false and the 2nd is true”.

Reference

if…else on MDN

Back to: JavaScript Reference > JS Conditional Statements