TypeScript Nested Loops

A loop inside a loop

Nested loops means the body of one loop contains another loop. The outer loop runs once per row. For each of those passes, the inner loop runs all the way through. If the outer loop has 3 passes and the inner loop has 4, the inner body runs 12 times.

That product is the point. One loop walks a line. Two loops walk a rectangle: seats in a theater, cells in a spreadsheet, pairs of numbers. Keep the counters on different names. This tutorial uses row andcol, or i and j.

Print every cell of a grid

This program does not store a table. It only prints coordinates. The outer loop picks the row. The inner loop prints every column on that row, then a newline starts the next line. Read the output as a 3 by 4 grid.

for (let row = 0; row < 3; row++) {
  let line = "";
  for (let col = 0; col < 4; col++) {
    line += "(" + row + "," + col + ") ";
  }
  console.log(line);
}

A multiplication table

Each cell is the product of its row number and its column number. The outer loop is the left factor. The inner loop is the right factor. A newline after the inner loop finishes one row of the table.

for (let row = 1; row <= 5; row++) {
  let line = "";
  for (let col = 1; col <= 5; col++) {
    line += String(row * col) + "\t";
  }
  console.log(line);
}

The loops count from 1 this time because people read a times table that way. Array indexes still start at 0; this chapter is about nested repetition, not storage. \t is a tab so the columns line up.

Read the counters the same way every time

Declare each counter in its own for header. Then row is not visible after the outer loop, and col is not visible after the inner loop. Reusing one name for both loops is a common source of off-by-one bugs.

Nested loops over a list

You can nest without a rectangle of numbers. This program prints every pair of names from a small array. The outer index is the first person. The inner index starts at i + 1 so each pair appears once, and a name is never paired with itself.

const names: string[] = ["Ada", "Ben", "Cara"];
for (let i = 0; i < names.length; i++) {
  for (let j = i + 1; j < names.length; j++) {
    console.log(names[i] + " / " + names[j]);
  }
}

Three names produce three pairs: Ada/Ben, Ada/Cara, Ben/Cara. Compare i and j tonames.length, not a magic 3, so the nest still works if you push another name.

break leaves only the inner loop

break ends the loop it sits in. Inside the inner loop, it stops that row and the outer loop continues with the next row. It does not jump out of both loops. If you need to stop the whole nest, set aboolean flag and test it in the outer condition, or return from a function.

From printing a grid to storing one

Nested loops print a table. They also fill one and read one. The next chapter stores the cells in a 2D array and walks them with the same outer-row, inner-column shape you used here.