Nested Loops in JavaScript with Examples

By Afra

In this tutorial post, we will learn about nested loops in JavaScript.

•  Nested loops definition.
• uses or advantages of nested loops.
• control structure and algorithm to understand its working.
•  example code with output

Nested loops in JavaScript:

so basically what is a nested loop?
it can be defined as a loop within a loop or an outer loop embedded with an inner loop.

Why use nested loops?

• It is mainly used to print or visualize table, matrix, pattern, or multidimensional array.
• Usage of memory is less.
• Suitable when the number of iterations is more in a program.

flow chart and algorithm of the nested loop:

Algorithm:

• firstly, check for the outer-loop condition if the condition satisfies or is true, then control goes to the inner loop.
• if the inner-loop condition is true, the inner loop statement gets executed and its expression gets updated.
• if the inner loop condition is false, control goes to the outer-loop and its expression gets updated and then the normal flow goes on from outer to inner then it exits.
• Time arises when the outer-loop condition becomes false and it gets exited from the iteration.

syntax:

outer-loop(iteration condition){
inner-loop(iteration condition){
inner-loop statemnet

                                                                                      ———————–

}outer-loop statement
}

Example code with output:

for(i=1;i<=5;i++){ //outer loop
    console.log("for i= " + i + "the innerloop iteration values are")
    for(j=1;j<5;j++){  //inner loop
        console.log("j= "+j)
    }
}

for i= 1 the innerloop iteration values are
j= 1
j= 2
j= 3
j= 4
for i= 2 the innerloop iteration values are
j= 1
j= 2
j= 3
j= 4
for i= 3 the innerloop iteration values are
j= 1
j= 2
j= 3
j= 4
for i= 4 the innerloop iteration values are
j= 1
j= 2
j= 3
j= 4
for i= 5 the innerloop iteration values are
j= 1
j= 2
j= 3
j= 4

In general, to print a table /matrix or any pattern program the representations are as follows

1. for outer-loop consider  i=rows ( prints the  rows)
2. for inner-loop , j=columns.(prints he columns)

This is necessary to understand and implement the program in a better way.

Let’s create some pattern using JavaScript Nested Loops

Now we will see some pattern programs to understand the concept

pattern 1:

print the pattern as shown below:

AAAAA
AAAAA
AAAAA 
AAAAA
AAAAA

let alp="" //empty string
let n=5 //both the loop should run 5 times
for(let i=1;i<=5;i++){
    for(let j=1;j<=5;j++)
    {
        alp+="A"; //pass any string to print 
    }
    alp+="\n";//new line for each row
}
console.log(alp);

In the above code, notice that number of rows is the same as the number of columns. so this gives an idea while writing condition for a particular pattern program. there are many patterns you could solve and learn the concept from them. Let us see one last pattern program

Pattern 2:

*
**
***
****
*****

for this consider 2 loops and both should run 5 times ie n=5

notice when   i=1,j=1

i=2,j=2

by looking at the dependencies of  i  and j  the code is as follows:

let star=""
let n=5
for(i=0;i<=5;i++)
{
    for(j=0;j<i;j++){ 

        star+="*"
    }
    star+="\n"
}
console.log(star)

2 responses to “Nested Loops in JavaScript with Examples”

1. Gopi says:

   October 18, 2021 at 6:38 pm

   this, perfectly put. I had some doubts in this topic, and now it’s all good and cleared

   Reply
2. Maheen Fatimah says:

   October 19, 2021 at 1:47 pm

   Wow! This information is so detailed and well written. It was very helpful and innovative.
   Hat’s off to the information compiler and editor of this article Afra 🙂

   Reply