Nesting For Loops in JavaScript

Nesting for loops is crucial in JavaScript, enabling iteration over multi-dimensional data structures or performing complex tasks. It involves placing one loop inside another, where the outer loop executes for each iteration of the inner loop. This facilitates operations on multi-dimensional arrays or creating intricate patterns, essential for efficient data manipulation and traversal.

Types of Nested For Loops in JavaScript

In JavaScript, you can nest different types of loops to achieve the desired iteration. Common types include a For Loop within another For Loop, which is a standard nested loop for iterating over multi-dimensional arrays. Additionally, a For Loop within a For-In Loop combines index-based and property-based iteration, while a For Loop within a For-Of Loop mixes index-based and value-based iteration. These nested loops provide flexibility for handling complex data structures and iteration patterns.

For Loop within Another For Loop

This is the most straightforward approach, where a for loop is placed inside another for loop. It is often used for iterating over two-dimensional arrays or creating simple patterns.

Syntax:

for (let i = 0; i < outerLimit; i++) {
    for (let j = 0; j < innerLimit; j++) {
        // Code to execute
    }
}

Example: The example below shows Nesting Loops where For Loop within Another For Loop in JavaScript.

for (let i = 1; i <= 10; i++) {
    let row = "";
    for (let j = 1; j <= 10; j++) {
        row += (i * j) + "\t";
    }
    console.log(row);
}

1    2    3    4    5    6    7    8    9    10    
2    4    6    8    10    12    14    16    18    20    
3    6    9    12    15    18    21    24    27    30    
4    8    12    16    20    24    28    32    36    40    
5    10    15    20    25    30    35    40    45    50    
6    12    18    24    30    36    42    48    54    60    
7    14    21    28    35    42    49    56    63    70    
8    16...

For Loop within a For-In Loop

In this approach, a for loop is nested within a for-in loop. The for-in loop iterates over the properties of an object, and the inner for loop can perform additional iterations for each property.

Syntax

for (let key in obj) {
    for (let i = 0; i < limit; i++) {
        // Code to execute
    }
}

Example: The example below shows Nesting Loops where For Loop within a For-In Loop in JavaScript.

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
    console.log(`Key: ${key}`);
    for (let i = 0; i < 3; i++) {
        console.log(`  Value multiplied by ${i}: ${obj[key] * i}`);
    }
}

Key: a
  Value multiplied by 0: 0
  Value multiplied by 1: 1
  Value multiplied by 2: 2
Key: b
  Value multiplied by 0: 0
  Value multiplied by 1: 2
  Value multiplied by 2: 4
Key: c
  Value multiplie...

For Loop within a For-Of Loop

In this approach, a for loop is nested within a for-of loop. The for-of loop iterates over iterable objects like arrays, and the inner for loop can perform additional iterations for each element.

Syntax

for (let value of arr) {
    for (let i = 0; i < limit; i++) {
        // Code to execute
    }
}

Example: The example below shows Nesting Loops where For Loop within a For-Of Loop in JavaScript.

const arr = [1, 2, 3];

for (let value of arr) {
    console.log(`Value: ${value}`);
    for (let i = 0; i < 3; i++) {
        console.log(`  Value plus ${i}: ${value + i}`);
    }
}

// Nikunj Sonigara

Value: 1
  Value plus 0: 1
  Value plus 1: 2
  Value plus 2: 3
Value: 2
  Value plus 0: 2
  Value plus 1: 3
  Value plus 2: 4
Value: 3
  Value plus 0: 3
  Value plus 1: 4
  Value plus 2: 5