Friday, May 31, 2013

For Loops in Javascript explained

I've been going through Javascript tutorials at Code Academy which I had blogged about a short while ago. Now I'm at the 'For' loops section finishing up the small tutorial on searching for a particular string within a text.

The Situation

The tutorial guides you to seek the first letter of the string your searching for, in this case it's your name, upon which it proceeds to push characters equal to the length of your name into an empty array.

Now I went through the motions and even though the lessons in Code Academy are the most well explained I've found anywhere about Javascript, it still took me a while to figure out what was going on.

So to cement that for me, and hopefully aid others, I will attempt to visually depict the loop structure.

For Loop Structure

The main part of the code is the For loop which ensconces an If loop containing another For loop. I believe Inception had a similar plot, but I digress.


This is the code in question
    for(var i = 0; i < text.length; i++) 
   {
       if(text[i] == "D") 

       {
           for (var j = i; j < (myName.length + i); j++) 

           {
            hits.push(text[j]); 
           }
       }
   }

The outer For loop starts at '0' and proceeds for the length of the body of text in question. Then for every character element in the body of text, which is treated as an array, the code checks for the starting letter of your name. 

The If loop, that follows immediately, checks whether the element at that particular array position is the same as the first letter of your name. If it's true then it executes the inner most loop.

The inner most For loop initializes a variable to the same count as the first loop's count. /* Now this is the part where I'm still somewhat unclear and therefore this blog post */ The loop is meant to stop when it reaches the length of your name. The tutorial achieves that by starting with the position where it encounters the initial letter of your name plus the length of your name. 
Then whatever characters follow will be pushed into the empty array, which isn't shown here but is in the full code. 

I understand the logic behind most of it but some aspects were still a bit foggy.  The way I overcame it was to visualize the logic or try to go through the flow mentally.  And it happened while I was writing this blog.

So verbally the flow goes like this:
The For and If loop - counter iterates from '0' till the array position that matches the first letter of your name. At this point the first counter stops.

Then the inner most loop starts from the position where the first two left off, which is 'i', and continues for the length of your name 'myName.length'. Each of those array elements are pushed into the empty array mentioned earlier.

Now the inner most For loop is completed due to the condition of the length of the name being met, and reverts back to the outer For loop. That cycles through the rest of the characters in the text and repeats the process if the condition is true or runs till the end and finishes the loop.

That's all folks.
Enhanced by Zemanta

No comments: