In JavaScript, there are times when we need to break out of nested loops. Using break only exits the innermost loop. However, we can employ several techniques to achieve our goal.

overview

In JavaScript, there are three ways to exit loops:

• Break Statement: The break statement immediately exits the innermost loop or a switch statement.

1
2
3
4
5
6
7
8

function exitLoops() {
  for(let i = 0; i < 10; i++) {
      if(i == 5) {
          break;
      }
      console.log(i); // 0 1 2 3 4
  }
}

• Continue Statement: The continue statement is similar to break, but instead of exiting a loop, it starts a new iteration of the loop.

1
2
3
4
5
6
7
8

function exitLoops() {
  for(let i = 0; i < 10; i++) {
      if(i == 5) {
          continue;
      }
      console.log(i); // 0 1 2 3 4 6 7 8 9
  }
}

• Return Statement: The return statement specifies the value returned from a function and can only appear inside a function body.

1
2
3
4
5
6
7
8

function exitLoops() {
  for(let i = 0; i < 10; i++) {
      if(i == 5) {
          return;
      }
      console.log(i); // 0 1 2 3 4
  }
}

Exiting Nested Loops

1. Using Labels

JavaScript allows us to label loop statements and use the break statement to exit a specified loop level.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function exitLoops() {
  outerLoop: // Label
  for (let i = 0; i < 5; i++) {
    innerLoop: // Label
    for (let j = 0; j < 5; j++) {
      if (i * j > 10) {
        console.log(`Breaking out of loops at i=${i}, j=${j}`);
        break outerLoop; // Breaks out of outerLoop
      }
    }
  }
}

In this example, once a condition is met, break outerLoop will immediately exit all loops. The continue outerLoop can achieve a similar effect.

2. Using Functions and Return

Another method is to encapsulate the loops within a function and use return to terminate the function’s execution, thereby exiting the loops.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function exitLoops() {
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      if (i * j > 10) {
        console.log(`Exiting function at i=${i}, j=${j}`);
        return; // Exits the function
      }
    }
  }
}

exitLoops();

Here, the return statement directly terminates the entire function.

3. Using Try/Catch/Throw

This method utilizes JavaScript’s exception handling mechanism. Inside the loop, when a condition is met, we can throw an exception and catch it in an outer try/catch statement to exit the loop.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function exitLoops() {
  try {
    for (let i = 0; i < 5; i++) {
      for (let j = 0; j < 5; j++) {
        if (i * j > 10) {
          throw `Exiting loops at i=${i}, j=${j}`;
        }
      }
    }
  } catch (e) {
    console.log(e);
  }
}

exitLoops();

In this case, when i * j exceeds 10, we throw a string as an exception and catch it in the outer try/catch.

This method can also be used to exit a forEach loop:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function exitLoops() {
  try {
    [1, 2, 3, 4, 5].forEach((item) => {
      if (item > 2) {
        throw `Exiting loops at item=${item}`;
      }
    });
  } catch (e) {
    console.log(e);
  }
}

exitLoops();

In this example, we iterate over an array using forEach. When an element exceeds 2, we throw an exception, which is then caught and printed.

By using these techniques, you can effectively manage your nested loops in JavaScript.