JavaScript Things: For Loops 101

Today on my journey to learn JavaScript, I came across the for loop. It seems nowadays that the for loop is not used as often. It is used so infrequently in fact, that almost all of the JS tutorials I’ve watched merely introduce the concept and then quickly move on without really explaining exactly how it works (and trust me, I watched A LOT of JS tutorials on this).

So because of this, I figured it would be beneficial to myself, and hopefully whoever reads this, if I wrote an article explaining how the for loop works. Or at least how I understand and interpret it.

What is a for Loop?

For loops are used JavaScript to perform a repeated task based on a condition. The condition typically will return TRUE or FALSE. As long as a condition is TRUE, the loop will continue to run until it reaches a condition of FALSE.

Syntax

So let’s start with the syntax of the for loop. In terms of pseudo-code it is broken down into something like this:

The syntax above is pretty complex so let’s break down each term.

for: Just lets the computer know this is a for loop

Initializer: this part is run first. It is usually used to create a counter variable that keeps track of how many times our loop has been executed.

Condition: this is a condition that is run after the initializer. If the condition returns TRUE, then the code inside the code block will run. If the condition returns FALSE, the loop stops running and ends.

Incrementor: the incrementor updates the counter variable and is ran after the code block finishes.

Code Block: this is the code that will be run if the condition returns TRUE.

Confused and scared? Good, it means you’re learning (and have emotions). Let’s see if we can clarify this with an example.

The example code above is a simple counter that will log out the numbers 0, 1, 2, 3, and 4 onto the console. But don’t let this code scare you, under the hood, it is the same code breakdown as I mentioned above:

Steps

Next up we need to talk about the steps of a for loop. This is actually where it gets tricky because the next step is determined by the condition.

Step 1: We begin here at the initializer. This is run before the loop begins. In this particular loop we are declaring a number of 0 and assigning it to the variable i.

Step 2: Next we run the condition in Step 2. Remember that in order for the loop to run, the condition must return true. If it returns false, the loop end.

So basically:
If true go to Step 3
If false end loop

Step 3: Because the condition in Step 2 returned TRUE, the code inside the code block will be executed. The variable i will be logged onto the console

Step 4: Next, step 4 is executed. i++ where i was initially equal to 0 now gets 1 added to it becoming 1. The variable i = 1.

Now What?

Remember above where I mentioned the conditional being the tricky part? Well, I lied. The really tricky part is what comes next after Step 4!

A loop can only end when a condition returns false. Because that condition has not been met yet, Step 4 goes back to Step 2 and runs the condition again.

In case you’re wondering why it doesn’t go back to Step 1, it is because a for loop is initialized only once (per thing it is looping, see arrays)

Back to Step 2: We go back to the condition. Remember that i is now equal to 1. Since 1 < 5 returns TRUE, we go to Step 3 the code block gets executed again

Step 3: the new variable i is logged onto the console and Step 4 is up to bat

Step 4: the variable i hits a single and now i = 2!

Fast Forward

This loop continues to run and 2 gets logged onto the console followed by 3 and then 4! At this point the console looks like this:

The End of the Loop

Eventually, i++ in Step 4 will become 5, and when that happens…

Step 2: The condition 5 < 5 is run but this time the condition returns FALSE thus breaking out of the loop and ending it!

Conclusion

for Loops are a useful feature in Javascript that allows you to repeat a block of code while certain conditions return TRUE.

Hope this article was able to shed some light on how they work and perhaps taught you something. Thanks for reading!