Nested Loops in JavaScript
A deep dive into how loops can be placed inside one another to handle complex, multi-
dimensional iterative tasks 4 with practical code examples and live output.
SECTION 3.4.6
What Is a Nested Loop?
When multiple iterative tasks are related, one loop can reside inside another 4 this is called a
Nested Loop.
Outer Loop Starts
The outer loop begins execution first, entering its first iteration.
Inner Loop Runs
The inner loop runs completely 4 start to finish 4 for each outer iteration.
Outer Increments
Once the inner loop finishes, the outer loop increments and the process repeats.
Outer Loop Ends
The cycle continues until the outer loop's condition is no longer true.
Nested Loop Execution Flow
Check Termination
Repeat or finish outer loop
Outer Index Increments
Advance outer counter
Inner Loop Runs
Complete all inner iterations
Outer Loop Starts
Initialize outer index
Understanding this execution order is key: the inner loop always completes all its iterations before the outer loop advances by a single step.
Example: Basic Nested Loop (Fig-33)
The following code (Fig-33) demonstrates a nested loop where the outer loop runs 5 times (i = 0 to 4) and the inner loop runs 3 times (j = 0 to 2) for each outer
iteration.
<html>
<body>
<script type="text/javascript">
[Link]("About to Enter the Loops !!!<br />");
for (var i = 0; i < 5; i++)
{
[Link]("<br /> The Outer Loop: " + i + "<br />");
for (var j = 0; j < 3; j++)
{
[Link]("Inner Loop: " + j + " ");
}
}
[Link]("<br /> Loops Terminate !!!<br />");
</script>
</body>
</html>
Output: Basic Nested Loop (Fig-33)
For each of the 5 outer iterations (034), the inner loop prints 3 values (0, 1, 2). The
browser output clearly shows the outer loop label followed by the inner loop values
on the same line, repeated for every outer index.
Outer Iterations Inner Iterations
5 (i = 0 to 4) 3 per outer (j = 0 to 2)
Total Executions
15 inner loop runs
Understanding the Iteration Count
5 3 15
Outer Loop Runs Inner Loop Runs Total Inner Executions
i iterates from 0 to 4 j iterates from 0 to 2 each time 5 × 3 = 15 total inner loop runs
The total number of inner loop executions equals the product of the outer and inner loop counts — a fundamental principle when analyzing nested loop
performance and complexity.
Example: Printing Math Tables (Fig-34)
In a similar fashion, the code in Fig-34 prints multiplication tables from 2 to 5. The outer loop assigns the value for which the table is required (i = 2 to 5), while
the inner loop prints each row of the table (j = 1 to 10).
<html>
<body>
<script type="text/javascript">
for (var i = 2; i <= 5; i++)
{
[Link]("<br /> Table of: " + i + "<br />");
for (var j = 1; j <= 10; j++)
{
[Link](i + " * " + j + " = " + (i*j) + " ");
}
[Link]("<br /> <br />");
}
</script>
</body>
</html>
Output: Math Tables (Fig-34)
The browser output shows four complete multiplication tables 4 for 2, 3, 4,
and 5 4 each printed on a single line with all 10 products. The outer loop
controls which table is printed; the inner loop controls how many rows
appear.
Outer Loop Inner Loop
i = 2 to 5 ³ selects the table j = 1 to 10 ³ prints each
number multiplication row
Comparing the Two Examples
Feature Fig-33: Basic Nested Loop Fig-34: Math Tables
Outer Loop Range i = 0 to 4 (5 iterations) i = 2 to 5 (4 iterations)
Inner Loop Range j = 0 to 2 (3 iterations) j = 1 to 10 (10 iterations)
Total Inner Runs 15 40
Purpose Demonstrates loop structure Generates multiplication tables
Output Style Labeled outer + inner values Formatted i × j = result
Both examples follow the same nested loop principle — the outer loop sets context, and the inner loop performs repeated work within that context.
Key Takeaways: Nested Loops
Definition
A nested loop places one loop inside another to handle related, multi-level iterative
tasks.
Execution Order
The outer loop starts first; the inner loop runs completely before the outer index
increments.
Total Iterations
Total inner executions = outer iterations × inner iterations (e.g., 5 × 3 = 15).
Practical Use
Nested loops are ideal for tasks like printing multiplication tables, working with grids,
or processing multi-dimensional data.
