For and While Loops

Look at all them loops

In coding there are many times when you will have to run the same code over and over again. That’s why we have loops, blocks of code that will continually run until a cetain condition is met.

There are two main types of loops in Javascript, For and While. In this blog I’m going to cover the differences between the two and explain how to set up a simple example of each.

For Loop

First, we’ll hit up the For loop. A For loop just loops through the code a certain number of times.

Here’s an example of a For loop, which we’ll pick it apart in a bit.

for (let count = 0; count < 11; count++) {
console.log('Marcy counts to ' + count);
}

First and foremost we have the for keyword which you begin every for loop with otherwise you’ll get a syntax error.

Next, we got three things inside the parentheses, lets unpack these.

let count = 0

This is the “initialization”. We create a variable called count and set it to 0 . This number will actually change (though you won’t see it in the code block) later once we do some other stuff.

Note: The variable can be named anything, it doesn’t need to be count . It can be anything you want to name it. butt or potsAndPans or, as you’ll see in a lot of examples outside this, i , will work just as well as count .

count < 11

Then we have our “condition”. This is just saying, “While count is less than 11 continue running the loop.” Obviously our count is initialized at 0 but this is going to change later. Once the condition becomes false (when count is about to reach 11 ) the loop will stop.

count++

Now we have the final part of the loop, our “increment”. That ++ is an incrementor and it increments whatever its put on by 1.

So, this all makes sense so far, right?

First we initialize a count variable and set it to 0 , then we check count against the condition count < 11which is asking if count , which is 0 , is less than 11 . Which is true. Lastly (not really), we increment count by 1. Now making count equal to 1 . Then we do it all again, which is the loop. It will continue looping until the condition is no longer true which will be at 11 which is obviously not less than 11. The loop will then stop.

{
console.log('Marcy counts to ' + count);
}

Right after the for loop we have a block of code that will run with the loop. Here I’ve just made a console.log that returns a string Marcy counts to and then I add the value of count . This block will also run everytime we loop. So, in the end, this is what we end up with:

Marcy counts to 0
Marcy counts to 1
Marcy counts to 2
Marcy counts to 3
Marcy counts to 4
Marcy counts to 5
Marcy counts to 6
Marcy counts to 7
Marcy counts to 8
Marcy counts to 9
Marcy counts to 10

Woah! Wish I could count that high! Thanks For loop!

Note: If there is no way for the loop to exit, as in, you write the condition in a way that it always evaluates to true, you will get an infinite loop which will crash your program.

While Loop

A While loop is similar to a For loop, as in they both achieve a loop, but the conditions for looping are slightly different.

With a While loop, the code will continue to run while a certain condition is true. This is great for when we don’t know how many times we need it to loop, whereas with the For loop we knew we were going to loop through 10 times.