Why? Because Raymond Carver is awesome, that’s why. As much as I’d love to talk about Raymond Carver, and his effect on literature, that is another blog post entirely. You came here to read about For Loops.

So what is a For Loop exactly? Well when we drill it down it is little more than a piece of code that repeats until certain conditions have been met. Here’s an example:

  function factorial(multiplier) {
    for(var i = multiplier - 1; i > 0; i--) {
        multiplier \*= i;
    }
    return multiplier;
}
console.log(factorial(7));

(Why did I use console.log, instead of alert()? Don’t worry, here’s a post about the wonders of console.log.)

For all of you tl;dr; folks, here is a JSFiddle of this function. It is fully-loaded with console.logs, so if you pop open your console, you’ll be able to see what is happening in the function, as it happens.

Pretty sweet, no?

For those who would like a longer explanation, thank you. It took me a while to write this post, so I really appreciate you taking time to read it. :-D

So what does this dandy function do? Well I wrote up this function one time for a programming challenge to write up a short function that would take in a number and give you the factorial. I had to look up what factorial was, but it is the result of the number multiplied all the way down to 1.

So that function up there basically does this: 7 * 6 * 5 * 4 * 3 * 2 * 1 == 5040.

If you want to mess with it, you can do so here. Try changing the console.log to alert so you can see the answer on your screen.

Let’s break this down a little further by going through what the function actually does.

First the browser is going to read through the function, but since it isn’t actually called until the last line, nothing will happen. (Try removing the last line of the JSFiddle.)

Once it reaches that last line the function is actually called. This is when the work actually begins.

First let’s look at ‘multiplier’. Remember back in math class when you would have to solve for X? ‘Multiplier’ is basically X in this case. The browser doesn’t know what it is until we tell it.

console.log(factorial(7));

See there, we called the function and we passed in 7. In this case, 7 == X.

So next the browser goes back up to the top of the function to figure out what to do with 7, and what it finds is…. you guessed it, a For Loop!

for(var i = multiplier - 1; i > 0; i--)

So here’s what is happening. The For Loop is setting up and creates a variable called i. The new variable i is equal to 7 minus 1. (Remember multiplier == 7.) Of course, 7 minus 1 is 6, so i == 6.

Next the browser makes sure the second part of our For Loop is true. 6 is greater than 0, so it moves on to the code.

Wait, you say. There’s a third piece there. Well, yes there is, but the browser won’t execute that piece until we return back up to the For Loop. We’ll do that in a moment.

Now once we’ve determined that the second statement is true, we’ll move on the code. (A good thing to note, we will never move down to the code if the second statement of the For Loop isn’t true. So keep a close eye on those greater than/less than signs!)

multiplier *= i;

What’s up with this *= business, you ask? Well what that does is take the value of multiplier (7) and multiply it by the value of i (6) to give you 42. It then assigns 42 back to multiplier, which is what allows our function to work. (That’s what the equal sign after the asterisk does.)

Alright, so back up to the top of the loop. The browser skips the return for now, and goes ahead and decrement (subtract 1 from i) to change the value of i to 5. (This is done at the end of the loop.)

Next, the browser tests if the For Loop will still run. (Spoiler: It will.)

Because i is still greater than 0, the code will be executed again with 42 * 5. Multiplier will be assigned this new value, and then i will be decremented at the end of the loop.

Rinse, lather, repeat until i is no longer greater than 0. At that point, we do not execute the loop, instead we skip the code and jump down to the return, which tells us to give back the value.

Phew! Did all this looping make you dizzy?

Let me know what you think of the post, or if you have any questions in the comments!