Nested Loops

A loop can contain another loop. This is called a nested loop. In each iteration of the outer loop, the inner loop runs all the way through. Let's list every T-shirt a shop sells, in every size and every color:

const sizes = ["S", "M"];
const colors = ["red", "blue", "black"];
for (const size of sizes) {
    for (const color of colors) {
        console.log(size, color);
    }
}

S red
S blue
S black
M red
M blue
M black

The outer loop takes "S", and the inner loop goes through all three colors. Only then does the outer loop take "M", and the inner loop goes through all the colors again. The inner block runs 2 × 3 = 6 times. Give the variables of the two loops different names (here size and color), so that you know which is which.

Nested loops are also how you go through nested arrays. The outer loop takes one inner array at a time, and the inner loop goes through its elements:

const groups = [["Anna", "Tom"], ["Eva", "Peter", "Jack"]];
for (const group of groups) {
    console.log("Group:", group);
    for (const name of group) {
        console.log("Hello,", name);
    }
}

Group: ["Anna", "Tom"]
Hello, Anna
Hello, Tom
Group: ["Eva", "Peter", "Jack"]
Hello, Eva
Hello, Peter
Hello, Jack