Explaining Nested Loops for Beginners - JavaScript.
Muzammil Ahmed Khan
Posted on October 6, 2019
// Explaining Nested Loops in Javascript
function nestedLoop(limit)
{
// OUTER LOOP:
for(let outerLoop = 1; outerLoop <= limit; outerLoop++)
{
/* OUTER LOOP Definition:
outerLoop initial value = 1;(loop start from 1)
Condition: outerLoop <= limit , Loop will continue until value of
outer loop is less than equal to limit provided by user in Function Argument.
outerLoop++:if condition is true outerLoop will increment by 1 with each Iteration.
Iteration (OUTER LOOP):
check condition in outer loop if outerLoop(value = 1) <= limit (value = 5)
its true as 1 is less than 5 OUTER LOOP continues
print (OuterLoop 1) on console, Enter in INNER LOOP
Iteration(OUTER LOOP): increment the value of outerLoop by 1 (outerLoop = 2) now.
check condition if outerLoop <= limit (2 less than equal to 5)
condition is true so print (OuterLoop 2) on console and Continues to Inner Loop.
*/
console.log("OuterLoop "+outerLoop);
// INNER LOOP:
for(let innerLoop = 1; innerLoop <= outerLoop; innerLoop++)
{
/*
Definition of INNER LOOP:
loop start from value 1, loop will continue until value of innerLoop is less
than equal to outerLoop, if condition true value of innerLoop incremented by 1
with each Iteration
======================== INSIDE OF OUTER LOOP ITERATION 1 ========================
Iteration1(INNER LOOP)
check condition if innerLoop value (which is 1) is less than equal to
outerLoop value (which is also 1) so condition is true as innerLoop is equal to
outerLoop (1 === 1) so print (InnerLoop 1) in second line of console
increment the value of innerLoop by 1 (value of innerLoop is now 2)
INNER LOOP continues to iteration 2 ....
Iteration(INNER LOOP)
check condition (if innerLoop(value = 2) less than euqal to outerLoop(value = 1))
condition is false as 2 is greater than 1 so INNER LOOP ENDS
and goes back to OUTER LOOP 2nd Iteration.
SEE ABOVE 2ND ITERATION OF OUTER LOOP
=======================END OF 1ST ITERATION OF OUTER LOOP ===========================
======================== INSIDE OF OUTER LOOP ITERATION 2 ========================
TIP FOR INNER LOOP :so if you remember that we leave our innerLoop value =2
when we end the INNER LOOP in 1st Iteration of OUTER LOOP but thats the key point in
INNER LOOP that the value it ends in 1st Iteration of OUTER LOOP it will not continue
from that value infact it re-start its iteration from 1 and start from initial value =1
in our last iteration of OUTER LOOP value of innerLoop is 2 (2nd Iteration of INNER LOOP)
So now INNER LOOP is start inside in 2nd Iteration of OUTER LOOP
INNER LOOP again restart form 1st Iteration and again start from value 1
2nd ITERATION OF OUTER LOOP)
INNER LOOP (1st Iteration) in condition it checked if innerLoop(value=1) <= outerLoop(value=2)
as 1 is less 2 which is true so print (InnerLoop 1) on console
condition is true so INNER LOOP continues and increament value of innerLoop by 1 (innerLoop value is 2 now)
and goes to 2nd Iteration of INNER LOOP.
2nd ITERATION OF OUTER LOOP)
INNER LOOP (2nd Iteration) again check condtion which is true as value of innerLoop(2) is equal to outerLoop(2)
Loop continues and increment value of innerLoop by 1 so go into 3rd Iteration of INNER LOOP
check condition which is false because value of innerLoop is now 3 and greater than outerLoop value = 2.
inner loop ends and continue to 3rd ITERATION OF OUTER LOOP.
And this process is continues until the condition of OUTER LOOP becomes false which is (outerLoop less than equal to limit).
Things to Remember:
1- in each Iteration of OUTER LOOP inner loop continue from its initial value
and repeat its all iterations until its condition become false.
2- use nested loops when you have to worked on multi-dimension arrays or calculating the
mathematical calculation which involve multiple values and each value is increment in
next cycle.
3- try to separate your inner loop in another function. if we take above example and separate
both loops in two function it would be like this:
function outer(limit)
{
for(let outerLoop =1; outerLoop <= limit; outerLoop++)
{
//OUTERLOOP
console.log("OuterLoop "+ outerLoop);
//INNERLOOP
console.log(inner(outerLoop));
}
}
function inner(outerLoop)
{
for(let innerLoop =1; innerLoop<=outerLoop; innerLoop++)
{
console.log("InnerLoop "+innerLoop);
}
}
As you see that now code is less complex and easy to understand now.
I hope you like this tutorial take care see yo soon.
*/
console.log("InnerLoop "+ innerLoop);
}
}
}
console.log(nestedLoop(5));
💖 💪 🙅 🚩
Muzammil Ahmed Khan
Posted on October 6, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.