Loops are a very important part of programming.  In video games, the core logic is a loop called the game loop.  You make a choice, the game logic reacts, and then updates the screen with the next set of choices. This loop continues until you either win the game, lose the game or hit a fail state. In JavaScript, loops are important because they allow you to iterate over data quickly and efficiently. Larger data structures like Arrays and Objects are easier to read when you use a loop.

For Loops in JavaScript

The most used loop in JavaScript is the For loop.  A typical For loop looks like this:

The for loop uses an inbuilt variable to help iterate over whatever code you are trying to run. You can use a variable definition outside of the for block as an iterator but it is not exactly idiomatic to do this. Here is an example of what a for loop would look in a real piece of code:

for-loopIf you run this block of code inside of your JavaScript console you will see that the words "i times!" will be printed to the console 10 times with i iterating upwards from 1 to 10. You might also notice that the iterator i does not need to be defined as a variable because the for loop automatically reads it as one.

The console.log() part of this code block is a function that prints whatever is inside of the parathesis to the JavaScript console, in this case, the variable i concatenated with the word " times!".

While Looping in JavaScript

Another common type of loop is a while loop. A while loop continues to loop while the conditional statement embedded inside of it remains to be true. The general structure of a while loop looks like this:

Here is an example of a while loop iterating over a block of code:

while-loopNotice that the while loop features the iterator variable inside of its body rather than inside of the conditional statement like the for loop. This also means that before running this block of code you must define the iterator variable outside of the while loop. The main reason for this is because iterator variables are rarely used inside of while loops like they are in for loops. While loops are more commonly used for boolean type operators where an item is either true or false.

This is also a good time to bring up the iteration operator again. As you’ve probably noticed in both loops, the iteration of the variable in the conditional has been handled with a short-hand notation ++. This plus-plus sign adds one to the variable each time it is run.  Similarly, you can subtract one from a variable using minus-minus -- as a shorthand operator. Be careful where you put the iterator operator in relation to the variable, putting the operator after is called post-iteration and putting it before is called pre-iteration.

++i will increment the value of i, and then return the incremented value, so if you run this code for example:

If you use pre-iteration in a for loop you can sometimes accidentally skip a number unless you take steps to deal with how the variable is treated.

Conclusion

In this post, we talked about looping in JavaScript, mainly for and while loops. We also spoke briefly about the console.log() function and the different shorthand methods of iteration. In our next post, we will talk about Arrays. As always, if there is anything you think we left out or you want to talk about please comment below.