JavaScript Nested IF/ELSE Statements

Avoid Duplication and Verbosity by Nesting If/Else Statements

Businessman at his desk, working
Nullplus/E+/Getty Images

Nesting if/else statements helps to organize and isolate conditions in order to avoid testing the same condition twice or to minimize the number of times various tests need to be performed. 

By using if statements with both comparison and logical operators, we can set up code that will be run if a specific combination of conditions is met. We don't always want to test the entire condition in order to run one set of statements if the entire test is true, and another if it is false.

What if we want to be able to choose between several different statements, depending on which particular combination of conditions is true.

Suppose, for example, that we have three values to compare and wish to set different results depending on which of the values are equal. The following example shows how we can nest if statements to test for this (in bold below)

var answer;
if (a == b) {
  if (a == c) {
    answer = "all are equal";
  } else {
    answer = "a and b are equal";
  }
} else {
  if (a == c) {
    answer = "a and c are equal";
  } else {
    if (b == c) {
      answer = "b and c are equal";
    } else {
      answer = "all are different";
    }
  }
}

The way the logic works here is:

  1. If the first condition is true (if (a == b)), then the program checks for the nested if condition (if (a == c)). If the first condition is false, the program bumps to the else condition.
  2. If this nested if is true, the statement is executed, i.e. "all are equal".
  1. If this the nested if is false, then the else statement is executed, i.e. "a and b are equal".
     

Here are a few things to notice with how this is coded:

  • First, we created the variable answer to hold the result before we started the if statement, making the variable global. Without that, we would have needed to include the variable on the front of all of the assignment statements, since it would be a local variable.
  • Secondly, we have indented each nested if statement. This allows us to track more easily how many nested levels of statements there are. It also makes it clearer that we have closed the right number of blocks of code to complete all of the if statements that we opened. You may find that it is easier to put the braces there first for each if statement, before you start writing the code that belongs inside that block.

We can simplify one section of this code slightly in order to avoid having to nest the if statements quite as much. Where an entire else block is made up of a single if statement, we can omit the braces around that block and move the if condition itself up onto the same line as the else, using the "else if" condition. For example:

var answer;
if (a == b) {
  if (a == c) {
    answer = "all are equal";
  } else {
    answer = "a and b are equal";
  }
} else if (a == c) {
  answer = "a and c are equal";
} else if (b == c) {
  answer = "b and c are equal";
} else {
  answer = "all are different";
}

Nested if/then statements are common in all programming languages, not just JavaScript. Novice programmers often use multiple if/then or if/else statements rather than nesting them.

While this kind of code will work, it will quickly become verbose and will duplicate conditions. Nesting conditional statements creates more clarity around the program's logic and results in concise code that may run or compile faster.