A loop can be placed inside another loop. Each time the outer loop runs once, the inner loop runs through all of its iterations.
Basic execution order
Start with a small example:
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 3; j++) {
console.log(`outer i=${i}, inner j=${j}`);
}
}Output:
i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0
i = 1, j = 1
i = 1, j = 2Read it like this: when outer variable i is 0, the inner variable j goes through 0, 1, 2; then i becomes 1, and the inner loop runs through 0, 1, 2 again.
Trace the inner and outer loops
Advance one printed pair at a time. j finishes a whole row before i changes.
01for (let i = 0; i < 2; i++) {02 for (let j = 0; j < 3; j++) {03 console.log(i + ", " + j);04 }05}
>>>
KNOWLEDGE QUIZ
Multiplication table
Nested loops are useful for generating two-dimensional structures. For a multiplication table, the outer loop controls rows and the inner loop controls columns.
for (let i = 1; i <= 9; i++) {
let rowText = "";
for (let j = 1; j <= i; j++) {
rowText += `${j}*${i}=${i * j}\t`;
}
console.log(rowText);
}Output:
1*1=1 1*2=2 1*3=3 1*4=4 1*5=5 1*6=6 1*7=7 1*8=8 1*9=9
2*1=2 2*2=4 2*3=6 2*4=8 2*5=10 2*6=12 2*7=14 2*8=16 2*9=18
3*1=3 3*2=6 3*3=9 3*4=12 3*5=15 3*6=18 3*7=21 3*8=24 3*9=27
4*1=4 4*2=8 4*3=12 4*4=16 4*5=20 4*6=24 4*7=28 4*8=32 4*9=36
5*1=5 5*2=10 5*3=15 5*4=20 5*5=25 5*6=30 5*7=35 5*8=40 5*9=45
6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36 6*7=42 6*8=48 6*9=54
7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49 7*8=56 7*9=63
8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64 8*9=72
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81Each row fixes one value of i, then lets j go from 1 to 9.
For the common lower-triangular multiplication table, let j stop at the current value of i:
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
console.log("*");
}
console.log();
}Printing patterns
Nested loops can also control text patterns. The program below prints a triangle made of stars.
for (let row = 0; row < n; row++) {
for (let col = 0; col < n; col++) {
console.log(row === col ? "*" : ".");
}
console.log();
}Output:
*
**
***
****
*****The outer loop decides how many rows to print. The inner loop decides how many * characters appear on each row.
KNOWLEDGE QUIZ
Print a diamond star pattern
Given a size n, print the upper half of a diamond and then the lower half.
- Read an integer n.
- Use nested loops for the spaces and stars in the upper half.
- Use nested loops again for the lower half.