Understanding Nested Loops in JavaScript

Nested loops are loops inside other loops. The innermost loop completes fully before the next iteration of its outer loop runs.

Basic for Loop Review

A for loop has three parts: initialization, condition, and increment.

Creating a Nested Loop

1. Outer loop
   Initialize i from 0 to 9:

   1for (let i = 0; i < 10; i++) { 2 // inner loop goes here 3}

2. Inner loop
   Inside the outer loop, initialize j from 0 to 9:

   1for (let i = 0; i < 10; i++) { 2 for (let j = 0; j < 10; j++) { 3 console.log(`Top level: ${i}, Lower level: ${j}`); 4 } 5}

What Happens

• When i = 0, the inner loop runs j = 0…9.
• Then i increments to 1, and the inner loop runs again for j = 0…9.
• Continues until i = 9.

Adding a Third Level

You can nest as many loops as needed. Example with three levels:

Execution Order

1. Innermost (h) runs from 0 to 9.
2. Then middle (j) increments by 1, inner runs again.
3. Finally outer (i) increments.

Tips for Readability

• Use descriptive variable names if nesting more than two levels.
• Consider breaking complex logic into functions instead of deep nesting.
• Watch out for performance issues with large iteration counts.

Summary

• Nested loops run inner loops completely on each outer iteration.
• The innermost loop finishes first, then the next outer loop, and so on.
• Keep nesting shallow when possible for better readability and performance.