Introduction to Nested Loop in JavaScript
Nested Loop is a loop that is present inside another loop. Javascript supports the nested loop in javascript. The loop can have one or more or simple can have any number of loops defined inside another loop, and also can behave n level of nesting inside the loop. The nested loop is also called as inner loop and the loop in which the nested loop defined is an outer loop. The outer loop always executes first and the inner loop executes, the inner loop executes each time the outer loop executes once. In the case of multi-level nested an outer loop executes first and then the 1st inner loop executes and then 2nd inner loop executes and so on. Any type of nested loop can be defined inside any type of loops.
Syntax
The Syntax for Nested loop in javascript –
Outerloop
{
Innerloop
{
// statements to be execute inside inner loop
}
// statements to be execute inside outer loop
}An Outerloop and Innerloop are the loops that can be any type of loop-like for loop, while loop or do-while loop.
Flowchart for Nested for Loop
Below we will see the flow diagram for Nested Loop:
Explanation to the above diagram: An above image shows the flow of execution in the nested for loop, as in image we can clearly see that the outer loop first evaluates, if it is true then evaluates the nested loop and then executes its body. After the execution of the inner body again it goes back to the outer loop evaluates it and then evaluates the inner loop and so it repeats until they evaluate to true.
Examples to Implement Nested Loop in JavaScript
Below are the examples to implement for the same:
Example #1
The nested for loop means any type of loop that is defined inside the for loop:
Syntax:
for (initialization; cond; increment/decrement)
{
for(initialization; cond; increment/decrement)
{
// statements to be execute inside inner loop.
}
// statements to be execute inside outer loop
}Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>This is an example for nested loop in JavaScript</title>
</head>
<body>
<p>Click below button to loop inner loop each ( 5 ) times for outer loop.</p>
<button onclick="myFunction()">Click Here</button>
<p id="did"></p>
<script>
function myFunction() {
var text = "";
var i;
var j;
for (i = 0; i < 5; i++) {
for (j = 0; j < 2; j++) {
text += "The number is i = " + i + " and j = " + j + "<br>";
}
}
document.getElementById("did").innerHTML = text;
}
</script>
</body>
</html>Output:
After clicking on the button the output will be as given below:
Explanation to the above program: As in the above code the variable i is initialized to 0 and then program control passes to the i<5. If condition (i<5) is true, then the program control passes to the inner loop and an inner loop get executed until the condition (j<2) is true. Once the execution of the inner loop finished the control goes back to the outer loop and i++, after incrementing the value the condition for i is checked again (i<5). If the condition is true, then the inner loop again executed. These steps will repeat until the condition of the outer loop is true.
Example #2
The nested for while loop means any type of loop that is defined inside the while loop:
Syntax:
while (cond)
{
While (cond)
{
// statements to be execute inside inner loop.
}
// statements to be execute inside outer loop
}Code:
<!DOCTYPE html>
><html>
<head>
<meta charset= "utf-8" >
<title> This is an example for nested while in JavaScript </title>
</head>
<body>
<p>Click below button to print the matrix elements </p>
<button onclick="myFunction()">Click Here </button>
<p id="did"></p>
<script>
function myFunction() {
var text=" ";
var Arr = [
[10, 20],
[30, 40],
[50, 60]
];
var i=0;
while (i < 3) {
var j=0;
while (j < 2 ) {
text += "The Array element at i = " + i + " and j = " + j + " is "+Arr[i][j]+" <br>";
j++;
}
i++;
}
document.getElementById("did").innerHTML = text;
}
</script>
</body>
</html>Output:
After clicking on the button the output will be as given below:
Explanation to the above program: As in the above code the variable i is initializes to 0. The control goes to the while loop, and evaluate the condition I <2, if it is true, then the program control goes to the inner loop. Once execution of the inner loop is done, the outer loop increment (i++), and after incrementing the I value the condition (i<2) evaluate again, if the condition is true, the program control goes to the inner loop and these steps repeat until the condition of the outer loop is true.
Example #3
The nested for do-while loop means any type of loop that is defined inside the do-while loop:
Syntax:
do
{
do
{
// statements to be execute inside inner loop.
} while (cond);
// statements to be execute inside outer loop
} while ( cond );Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for nested while in
JavaScript </title>
</head>
<body>
<p>Click below button to print the A+A
matrix:</p>
<button onclick="myFunction()">Click Here
</button>
<p id="did"></p>
<script>
function myFunction() {
var text=" ";
var Arr = [
[10, 20],
[30, 40],
[50, 60]
];
var i=0;
while (i < 3) {
var j=0;
while (j < 2 ) {
var sum=0;
sum=Arr[i][j]+Arr[i][j];
text += "The A+A sum at i = " + i + " and j = " + j + " is "+sum+" <br>";
j++;
}
i++;
}
document.getElementById("did").innerHTML =
text;
}
</script>
</body>
</html>Output:
After clicking on the button the output will be as given below:
Explanation to the above program: As in the above code the variable I initialize to 0. We know that the do..while loop executes and then check the condition, which means the inner loop is executed and then check the outer loop condition. Once the inner loop executes, the program control goes to the increment of the i++ and again the condition is checked, if it is true, then the inner loop is executed again and these steps will be repeated until the condition in the outer loop is true.
Conclusion
JavaScript supports the nested loop feature, where a loop is present inside another loop. A loop can have one or number and/or n nested level of loops defined inside another loop. For each outer loop, the inner loop gets to execute. If the break or continue statement used inside the inner loop it breaks or continues to inner loop only, not the outer loop.
39 Online Courses | 23 Hands-on Projects| 225+ Hours| Verifiable Certificate of Completion
4.5
View Course
Recommended Articles
This is a guide to Nested Loop in JavaScript. Here we discuss an introduction to Nested Loop in JavaScript along with the flowchart, appropriate syntax and respective examples. You can also go through our other related articles to learn more –
