Explaining Nested Loops for Beginners - JavaScript. 
Tags: nestedloops, beginners, javascript, loops
Published: 2019-10-06 11:56:27

    // 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));