3.4.6 Nested Loops

This topic explains nested loops in JavaScript, where one loop resides inside another, and how they work together to perform complex repetitive tasks.

Definition

Nested Loop: Multiple iterative tasks, if they can be related, can be incorporated in such a way that one loop can reside inside the other and are termed as 'Nested Loop'. In a nested loop, initially the outer loop will start, and then the inner loop will run and finish. Thereafter, the index value of the outer loop will increment, and the inner loop will start and end again, and so forth and so on, till the outer loop terminates.

Core Concept

A nested loop is like a clock with an hour hand and a minute hand. The outer loop is like the hour hand—it moves slowly, one step at a time. The inner loop is like the minute hand—it goes around completely (12 steps) for every single step of the hour hand. So, for every 1 iteration of the outer loop, the inner loop runs completely. This structure is perfect for tasks that involve combinations, grids, or tables—like printing a multiplication table or drawing a pattern.

Detailed Explanation

How Nested Loops Work

• The outer loop starts and executes its first iteration.
• The inner loop runs completely (all its iterations) from start to finish.
• The outer loop executes its second iteration.
• The inner loop runs completely again.
• This continues until the outer loop terminates.

• One loop inside another.
• Outer loop controls the overall repetition.
• Inner loop completes all its iterations for each outer loop iteration.
• Total iterations = outer iterations × inner iterations.

Example 1: Simple Nested Loop

```html <html> <body> <script type="text/javascript"> document.write("About to Enter the Loops !!!<br />"); for (var i = 0; i < 5; i++) { document.write("<br> The Outer Loop: ", i, "<br />"); for (var j = 0; j < 3; j++) { document.write("Inner Loop: ", j, "&nbsp;"); } } document.write("<br> <br> <br> Loops Terminate !!!<br />"); </script> </body> </html> ```

Output: About to Enter the Loops !!! The Outer Loop: 0 Inner Loop: 0 Inner Loop: 1 Inner Loop: 2 The Outer Loop: 1 Inner Loop: 0 Inner Loop: 1 Inner Loop: 2 The Outer Loop: 2 Inner Loop: 0 Inner Loop: 1 Inner Loop: 2 The Outer Loop: 3 Inner Loop: 0 Inner Loop: 1 Inner Loop: 2 The Outer Loop: 4 Inner Loop: 0 Inner Loop: 1 Inner Loop: 2 Loops Terminate !!!

• The outer loop (`i`) runs 5 times (0 to 4).
• For each outer iteration, the inner loop (`j`) runs 3 times (0 to 2).
• Total iterations: 5 × 3 = 15.
• `&nbsp;` is a non-breaking space used to separate the inner loop values.

Example 2: Printing Mathematical Tables from 2 to 5

In a similar fashion, the code below prints mathematical tables from 2 to 5. The outer loop assigns the value for which the table is required, while the inner loop prints the table.

```html <html> <body> <script type="text/javascript"> for (var i = 2; i <= 5; i++) { document.write("<br> Table of: ", i, "<br />"); for (var j = 1; j <= 10; j++) { document.write(i, " x ", j, " = ", i * j, "&nbsp;"); } } </script> </body> </html> ```

Output: Table of: 2 2 x 1 = 2 2 x 2 = 4 2 x 3 = 6 2 x 4 = 8 2 x 5 = 10 2 x 6 = 12 2 x 7 = 14 2 x 8 = 16 2 x 9 = 18 2 x 10 = 20 Table of: 3 3 x 1 = 3 3 x 2 = 6 3 x 3 = 9 3 x 4 = 12 3 x 5 = 15 3 x 6 = 18 3 x 7 = 21 3 x 8 = 24 3 x 9 = 27 3 x 10 = 30 Table of: 4 4 x 1 = 4 4 x 2 = 8 4 x 3 = 12 4 x 4 = 16 4 x 5 = 20 4 x 6 = 24 4 x 7 = 28 4 x 8 = 32 4 x 9 = 36 4 x 10 = 40 Table of: 5 5 x 1 = 5 5 x 2 = 10 5 x 3 = 15 5 x 4 = 20 5 x 5 = 25 5 x 6 = 30 5 x 7 = 35 5 x 8 = 40 5 x 9 = 45 5 x 10 = 50

• The outer loop (`i`) runs from 2 to 5.
• For each value of `i`, the inner loop (`j`) runs from 1 to 10.
• The inner loop prints the multiplication table for the current value of `i`.
• Total iterations: 4 × 10 = 40.

Example 3: Pattern Printing

```html <html> <body> <script type="text/javascript"> for (var i = 1; i <= 5; i++) { for (var j = 1; j <= i; j++) { document.write("* "); } document.write("<br />"); } </script> </body> </html> ```

• *
• *

• The outer loop (`i`) controls the number of rows (1 to 5).
• The inner loop (`j`) runs from 1 to `i`, printing stars.
• Each row has one more star than the previous row.

Common Uses of Nested Loops

Intermediate Level

Nested loops consist of an outer loop and an inner loop. The outer loop controls the overall repetition, while the inner loop completes all its iterations for each outer loop iteration. Total iterations = outer × inner. Nested loops are used for multiplication tables, pattern printing, grid operations, and combinations. The inner loop must terminate before the outer loop continues. Common mistakes include infinite loops, incorrect bounds, and confusing the roles of the two loops.

Important Points

• - Nested loop = loop inside another loop.
• - Outer loop controls overall repetition.
• - Inner loop completes all iterations for each outer iteration.
• - Total iterations = outer × inner.
• - Used for multiplication tables, patterns, grids, combinations.
• - Inner loop must finish before outer loop continues.
• - `&nbsp;` is a non-breaking space in HTML.
• - Example: Tables 2–5: outer 2–5, inner 1–10.

Remember

• - Nested Loop: Loop inside loop.
• - Outer Loop: Runs slower, controls overall.
• - Inner Loop: Runs completely for each outer iteration.
• - Total: Outer × Inner.
• - Example: `for(i=2; i<=5; i++) { for(j=1; j<=10; j++) { ... } }`.
• - Uses: Tables, Patterns, Grids.
• - `&nbsp;`: Non-breaking space.

Common Mistakes

• - Infinite loops: Forgetting to update the inner or outer index.
• - Wrong bounds: Inner loop using outer loop's variable incorrectly.
• - Confusing i and j: Use meaningful names or clear comments.
• - Performance issues: Nested loops can be slow for large data.
• - Forgetting braces: Only the first statement after `for` is repeated.
• - Variable scope: Using `var` can cause issues; use `let` for block scope.

Quick Revision

Nested loops consist of an outer loop and an inner loop. The outer loop controls the overall repetition, while the inner loop completes all its iterations for each outer loop iteration. Total iterations = outer × inner. Nested loops are used for multiplication tables, pattern printing, grid operations, and combinations. The inner loop must terminate before the outer loop continues.

60-Second Revision

• Nested Loop: Loop inside loop.
• Outer Loop: Controls overall.
• Inner Loop: Runs completely for each outer iteration.
• Total: Outer × Inner.
• Example: Tables 2–5: `for(i=2; i<=5; i++) { for(j=1; j<=10; j++) { ... } }`.
• Uses: Tables, Patterns, Grids.
• Key Point: The inner loop completes all its iterations for each single iteration of the outer loop.