I have a bit of a love/hate relationship with For Loops. My first introduction was an extremely negative one. I struggled to understand even the core concept of what it was supposed to be doing and completely failed to recreate what I was shown. My naivety quickly turned my frustration into hatred and because of that I still subconsciously avoid using them in my code, though I now understand their value and use well.
I write this blog with the intention of encouraging readers to look at For Loops from a more positive and optimistic viewpoint. For loops are not the devil I once thought them to be and are oppositely extraordinarily helpful. What may take thirty or forty lines of typical code can be reduced to as little as four lines of code simply and in an easy to read format.
The key to For Loops lies in repetition, as the term “loop” implies, For Loops cycle through the same code as many times as you want them to. In the opening of the for loop you set an iterator, as the program repeats the code contained within the for loop it increases the iterator by whatever integer you select (most often one). While the practical applications and uses for this tool are as limitless as your imagination, I’ll try to keep this simple for explanation’s sake.
For an example, let’s say you needed a button on your webpage that when clicked created four new DIV tags each with a unique ID. You could write that out as four separate “append child” inserts each with a different ID specified, or you could simplify the code with a for loop. Using a for loop you would only need one “append child” insert and you could simply tell the for loop to number the ID’s based on the iteration, with four cycles.
In that example the first cycle would append the child element, create an ID for the new DIV and add a “0” it’s ID. The iterator would then increase to “1”, the code would begin again creating another DIV, but this time would add a “1” to the ID. This would continue until the for loop had finished it’s four cycles leaving four new DIVs on the page with numerical IDs.
The syntax for a for loop begins with an opening like, “ for (i = 0 ; i < 4 ; i++) { “.
Inside the parentheses there are four unique parts. The first part sets the iterator name and value much like a typical variable. The second part tells the for loop when to stop looping. The last part tells the for loop how much you want it to increase with each cycle, “++” simply adds one to the current value. After you’ve opened your for loop you can write your code however you need to, depending on what you want it to do with each cycle, everything within the open curly brackets will be repeated. To close the for loop you just put a closing curly bracket.
Hope this has been helpful and you can see the benefit of using For Loops, don’t let them intimidate you like they did me. Anytime you need the same thing done for various elements a for loop can save you a lot of typing and shorten your code significantly. Good luck and don’t forget you can always refer to helpful sites like w3schools if you need help with syntax or whatever.
If you want to check out more of Chris's work, check out his blog here: https://jastrowdesignscopy.blogspot.com/2018/11/