Nested loops in Javascript - Step-by-Step Execution

Concept Flow - Nested loops

Start Outer Loop i=0

↓

Start Inner Loop j=0

↓

Execute Inner Loop Body

↓

Update j

↓

Check j < limit?

Yes→Repeat Inner Loop

No↓

Update i

↓

Check i < limit?

Yes→Repeat Outer Loop

No↓

End

The outer loop starts and for each iteration, the inner loop runs completely before the outer loop moves to the next iteration.

Execution Sample

Javascript

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

This code prints pairs of i and j values where i runs from 0 to 1 and j runs from 0 to 2 for each i.

Execution Table

Step	i	j	Condition i<2	Condition j<3	Action	Output
1	0	0	true	true	Print i=0, j=0	i=0, j=0
2	0	1	true	true	Print i=0, j=1	i=0, j=1
3	0	2	true	true	Print i=0, j=2	i=0, j=2
4	0	3	true	false	Inner loop ends, increment i
5	1	0	true	true	Print i=1, j=0	i=1, j=0
6	1	1	true	true	Print i=1, j=1	i=1, j=1
7	1	2	true	true	Print i=1, j=2	i=1, j=2
8	1	3	true	false	Inner loop ends, increment i
9	2	0	false	N/A	Outer loop ends

💡 Outer loop condition i<2 is false when i=2, so loops stop.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	Final
i	0	0	0	0	1	1	1	1	2
j	0	1	2	3	0	1	2	3	N/A

Key Moments - 3 Insights

Why does the inner loop run completely for each single iteration of the outer loop?

Because the inner loop is inside the outer loop's block, it finishes all its iterations before the outer loop increments i (see execution_table rows 1-4 and 5-8).

Why does j reset to 0 each time the outer loop increments i?

Because j is declared inside the inner loop, it starts fresh at 0 for each new outer loop iteration (see variable_tracker showing j resets at After 4 and After 8).

What causes the loops to stop running?

The outer loop stops when i reaches 2 (condition i<2 is false at step 9), which ends the entire nested loop process.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of j at step 6?

A 1

B 2

C 0

D 3

💡 Hint

Check the 'j' column in execution_table row 6.

At which step does the outer loop condition become false?

A Step 8

B Step 9

C Step 4

D Step 3

💡 Hint

Look at the 'Condition i<2' column and find where it is false.

If we change the inner loop to run j < 2 instead of j < 3, how many total print outputs will there be?

A 4

B 6

C 3

D 2

💡 Hint

Multiply outer loop iterations (2) by new inner loop iterations (2).

Concept Snapshot

Nested loops run one loop inside another.
Outer loop runs once per each full inner loop run.
Inner loop resets each outer iteration.
Use nested loops to handle grids or pairs.
Syntax: for(...) { for(...) { ... } }

Full Transcript

Nested loops mean one loop runs inside another. The outer loop starts and for each value, the inner loop runs fully. For example, with i from 0 to 1 and j from 0 to 2, the program prints pairs of i and j. The inner loop completes all j values before i increases. Variables i and j change step by step as shown. The loops stop when i reaches 2. This helps when you want to repeat actions in a grid or pairs.