Everyone. Console.log works for everyone. Back in my for loops post, I said I would explain why I said to use console.log(), instead of alert(), and here it is!

If you’re like me, you got started on JavaScript to add some… flair to your otherwise static websites.

I got started on JavaScript in order to manipulate websites through a content management system. (Full disclosure: it was actually jQuery. Don’t judge me.)

If you’re someone who only wants to use JavaScript to say, add another list item where the CMS doesn’t already have one, or keep a certain list item from directing to the sitemap (I linked it to the homepage instead), jQuery can work wonders.

So with this in mind, console.log was a complete mystery to me. After all, it didn’t actually do anything, did it? I mean, on Codecademy it shows up in that one console-looking part of the screen, but I tried it on a website and it didn’t do anything.

You can even see me here on Twitter, asking the question, “just what exactly is this thing good for anyway?”

Hahaha, wasn’t I cute?

Yes, it is true that console.log doesn’t put anything on the page. What I didn’t realize though was how powerful it can be for debugging. (Yes, it’s true, I do have to debug my code.)

If you think back to my for loops post, I used console.log through the loop to expose the multiplier variable. (If you can’t quite remember the code, you can see it here on JSFiddle.)

If you don’t remember, or haven’t tried it, go ahead and open up that link above in a new tab, and open up dev tools. (Right click on the screen, and look for ‘Inspect Element’ in that menu.)

Navigate over to the console. (In the menu, on the right, there should be a ‘console’ option.)

Now go ahead and run the function, and watch what happens….

Pretty cool, huh?! It doesn’t just show you the variable, it actually exposes the value of that variable. That can be pretty useful if you have an object and you aren’t sure what it contains, or like our example, your variable value changes. This becomes especially handy in server-side JavaScript when you can’t access certain objects, varibles, and arrays through the browser console. Wrap it in a console.log, and you’ll be able to see what exactly is going on in your trusty terminal.

There are loads of good uses for console.log, this is just one example. I hope it helps you understand why you might want to use something like this while developing. Just because it doesn’t appear to do anything to your site doesn’t mean it’s without value.

And if you just love console.log now, check out this other blog post, by Devin Clark. He is a super knowledgeable guy, and you should definitely read his blog.

His console.log post details a lot of other cool things you can do with console.log in Google Dev tools. Definitely check it out!

Questions? Tweet me!

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!