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.

Practice

1. What does a nested loop in JavaScript mean?
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 2; j++) {
console.log(i, j);
}
}

easy

A. A loop inside another loop, running multiple times

B. A loop that runs only once

C. A loop that runs backwards

D. A loop that skips some numbers

Solution

1. Step 1: Understand the code structure

   The code has one loop inside another, called nested loops.

2. Step 2: Explain the behavior

   The inner loop runs fully for each iteration of the outer loop, so it runs multiple times.

3. Final Answer:

   A loop inside another loop, running multiple times -> Option A

4. Quick Check:

   Nested loop = loop inside loop [OK]

Hint: Nested means one loop inside another [OK]

Common Mistakes:

• Thinking nested loops run only once
• Confusing nested loops with single loops
• Believing nested loops skip numbers

2. Which of the following is the correct syntax for a nested loop in JavaScript?

easy

A. for (let i = 0; i < 3; i++) { for (let j = 0; j < 2; j++) { } }

B. for i in range(3) { for j in range(2) { } }

C. while (i < 3) { while (j < 2) }

D. loop i from 0 to 3 { loop j from 0 to 2 { } }

Solution

1. Step 1: Identify JavaScript loop syntax

   JavaScript uses for (let variable = start; condition; increment) syntax.

2. Step 2: Check nested loops syntax

   for (let i = 0; i < 3; i++) { for (let j = 0; j < 2; j++) { } } correctly nests two for loops with proper syntax and braces.

3. Final Answer:

   for (let i = 0; i < 3; i++) { for (let j = 0; j < 2; j++) { } } -> Option A

4. Quick Check:

   JS nested loops use for(;;) inside for(;;) [OK]

Hint: Look for 'for (let i=0; ...)' syntax in JavaScript [OK]

Common Mistakes:

• Using Python or other language syntax
• Missing curly braces {}
• Incorrect loop keywords

3. What is the output of this code?

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

medium

A. 1 2 3 1 2 3

B. 6 5 4 3 2 1

C. 1 4 9 2 5 8

D. 1 2 3 2 4 6

Solution

1. Step 1: Trace outer loop values

   Outer loop i runs 1 and 2.

2. Step 2: Calculate inner loop outputs

   For i=1, j=1,2,3 outputs 1*1=1, 1*2=2, 1*3=3.
   For i=2, j=1,2,3 outputs 2*1=2, 2*2=4, 2*3=6.

3. Final Answer:

   1 2 3 2 4 6 -> Option D

4. Quick Check:

   Multiply i and j in nested loops [OK]

Hint: Multiply outer and inner loop counters [OK]

Common Mistakes:

• Mixing up i and j values
• Not running inner loop fully each time
• Confusing output order

4. Find the error in this nested loop code:

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

medium

A. Outer loop condition is wrong

B. Missing semicolon after for loops

C. Inner loop uses same variable name 'i', causing conflict

D. Console.log syntax is incorrect

Solution

1. Step 1: Check variable names in loops

   Both loops use variable 'i', inner loop redeclares 'i' shadowing outer.

2. Step 2: Explain why this is a problem

   Using same variable name causes confusion and unexpected behavior in nested loops.

3. Final Answer:

   Inner loop uses same variable name 'i', causing conflict -> Option C

4. Quick Check:

   Use different variables for nested loops [OK]

Hint: Use different variable names for each loop [OK]

Common Mistakes:

• Reusing same variable name in nested loops
• Ignoring variable scope issues
• Assuming semicolons are mandatory after for()

5. You want to print a 3x3 grid of stars (*) using nested loops. Which code correctly does this?

hard

A. for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { console.log('*'); } }

B. for (let i = 0; i < 3; i++) { let row = ''; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); }

C. for (let i = 0; i < 3; i++) { console.log('***'); }

D. for (let i = 0; i < 3; i++) { let row = '*'; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); }

Solution

1. Step 1: Understand the goal

   We want 3 rows, each with 3 stars printed together as a line.

2. Step 2: Check each option's output

   for (let i = 0; i < 3; i++) { let row = ''; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); } builds a string of 3 stars per row and prints it 3 times.
   for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { console.log('*'); } } prints stars individually, not as rows.
   for (let i = 0; i < 3; i++) { console.log('***'); } prints 3 stars but only 3 times, no loop for columns.
   for (let i = 0; i < 3; i++) { let row = '*'; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); } starts with '*' and adds three more '*', printing four stars per row.

3. Final Answer:

   for (let i = 0; i < 3; i++) { let row = ''; for (let j = 0; j < 3; j++) { row += '*'; } console.log(row); } -> Option B

4. Quick Check:

   Build row string inside outer loop [OK]

Hint: Build each row string inside outer loop [OK]

Common Mistakes:

• Printing stars one by one without grouping
• Not resetting row string inside outer loop
• Confusing loops for rows and columns