What's the Best Way to Break from Nested Loops in JavaScript?

javascript

nested-loops

break

array-methods

byAlex Kataev·Aug 10, 2024

To efficiently exit nested loops, use a break with a label. Identify the outer loop with a label and execute the break referencing this label from within the nested loops.

Example:

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    // Break out of the loop when i equals j, just like in a math class
    if (i === j) break outer; 
  }
}

Using Labels for Efficient Loop Exit

Labels are the break and continue traffic controllers in JavaScript. They provide a handy way to precisely control when and how to jump out of loops, especially nested ones.

Alternative Ways: Functions with Return Statements

Sometimes using return within a function offers a clean and efficient way to halt the loops and exit once a specific condition is met.

Example:

function findValue(matrix, target) {
  // Looping like there is no tomorrow
  for (let row of matrix) {
    for (let item of row) {
      // Found it, let's bounce!
      if (item === target) return item;
    }
  }
}

Beware: Flag Variables and Loop Counters

Using flag variables or altering loop counters can manage a loop exit, but remember, with great power comes great responsibility. They can induce side effects or readability issues if misused.

Using Boolean Flags for Smooth Loop Break

In certain scenarios, maintaining a shared state like a boolean flag might be more efficient. This is specifically helpful with asynchronous code or event-driven designs.

Example:

let found = false;
// Little loop on the prairie
for (let i = 0; found === false && i < array1.length; i++) {
    for (let j = 0; j < array2.length; j++) {
        // Jackpot, time to dip!
        if (array2[j] === "desiredValue") {
            found = true;
            break;
        }
    }
}

Array Methods Bent on Efficiency

When working with arrays, the JavaScript array methods like some, find or every offer native ways to halt and control iterations, quite a neat way to write more functional and clean code.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const found = array1.some(num1 => array2.some(num2 => {
    // Caught the weasel, let's exit! 
    if (num1 === num2) return true;
}));

console.log(found); // true or false

Diverse Loop Types: The More, The Merrier

Mixing various loop types viz., for, while, for...of together provide a finely tuned control over the iteration process. This approach is particularly handy when different collections need different iterator behaviours.

Example:

let i = 0;
// Loop, there it is!
while (i < array1.length) {
  for (const value of array2) {
    // Time to hit the brakes!
    if (value === array1[i]) break;
  }
  i++;
}