Nested Loops

When you place a loop inside another loop, you create a nested loop. This is an incredibly common and powerful technique used for generating combinations, working with grids, or traversing multi-dimensional arrays. While it might look confusing at first, the rule governing how they execute is straightforward and absolute.

For every single iteration of the outer loop, the inner loop must complete all of its iterations from start to finish.

How Nested Loops Execute

Let’s look at a basic example with two nested loops. Beginners often intuitively expect that loops run in parallel, or that they somehow advance together. In JavaScript, however, code execution is purely sequential.

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}

i=1, j=1
i=1, j=2
i=1, j=3
i=2, j=1
i=2, j=2
i=2, j=3

Notice how the j loop completely counts from 1 to 3 while i is 1, and then does it all over again when i becomes 2:

Warning
Nested loops do not run in parallel. The inner loop acts as a roadblock; the outer loop cannot proceed to its next step until the inner loop has finished completely.

This behavior is fundamental to single-threaded JavaScript. The runtime cannot process the outer loop’s increment i++ until the entire block inside the outer loop has finished executing, which includes the entire lifecycle of the inner loop.

Working with 2D Arrays

A common use case for nested loops is iterating through a two-dimensional array (an array of arrays). Here, the outer loop selects a row, and the inner loop processes each column within that row.

const grid = [
  [1, 2], 
  [3, 4]
];

for (let i = 0; i < grid.length; i++) {
  for (let j = 0; j < grid[i].length; j++) {
    console.log(grid[i][j]);
  }
}

1
2
3
4

Breaking Nested Loops

Using break inside an inner loop only stops the inner loop. The outer loop will continue to its next iteration, completely unaffected by the inner loop’s early exit.

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    if (j === 2) break;
    console.log(`i=${i}, j=${j}`);
  }
}

i=1, j=1
i=2, j=1

If you need to break out of both loops at the same time, you must use a labeled statement. This is one of the few places in modern JavaScript where labels are considered appropriate.

outer: for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 3; j++) {
    if (j === 2) break outer;
    console.log(`i=${i}, j=${j}`);
  }
}

i=1, j=1

The break outer; command tells JavaScript to exit the loop labeled outer, stopping both loops immediately.

The Scope Pollution Danger

If you forget to use let when initializing the inner loop variable, you will accidentally overwrite the outer loop’s variable. This is a very common source of infinite loops!

let count = 0;
for (let i = 0; i < 5; i++) {
  // Danger! We forgot 'let' here. This overwrites the outer 'i'.
  for (i = 0; i < 2; i++) {
    count++;
    if (count > 10) break; // Artificial limit
  }
  if (count > 10) break;
}
console.log(count);

11

Because the inner loop resets i to 0, the outer loop will never reach 5, causing it to run forever unless artificially broken. The let keyword ensures the variable is scoped properly and independently.

What do you think will happen if the inner loop variable shadows the outer loop variable?

for (let i = 0; i < 2; i++) {
  for (let i = 0; i < 2; i++) {
    console.log(i);
  }
}

0
1
0
1

Practice