JavaScript Loops And How To Use Them

Introduction

When most people get asked if they know all the loops in JavaScript, the usual answer is 'The while and for loop. I know them all!'. Well, what if I told you that these aren't the only ones. There are five in total JS loops.

In this post we are going to see every one of these loops in action and when you are going to need to use them.

In each example we are going to show today, our goal is to print out(console.log) the numbers from 1 to 10. Let's start by our trusty:

While Loop

The while loop is probably the first loop that anybody learns when they start using JavaScript. It is used by many because of how simple it is. It goes a little something like this:

let i = 0
while(i < 10){
    i++;
    console.log(i)
}

The code that we wrote keeps running until the condition isn't met anymore. So in the example above when the variable i hits 10, the while loop will end.

For Loop

The for loop is probably the most used loop in JS. This loop repeats a certain block when a condition is met. Here is a quick example:

for(i = 1; i <= 10; i++){
    console.log(i);
}

In the for loop we first have to initialize the counter variable. What this means is we have to set the value of the var before the first execution of the code in our loop(i = 1). Then we have to set our condition for the loop(i <= 10). When the condition is met, it goes through the code once and comes back around, and it does that until the condition isn't met anymore. And finally, we have to increment our variable so that each time we loop we get a new value(i++). We certainly wouldn't want to get stuck in an infinite loop.

Now let's get to the lesser-known loops.

Do...While Loop

The do...while loop is a variant of the while loop. It's just turned the other way around.

let i = 0
do{
    i++;
    console.log(i);
}
while(i < 10)

It's pretty straightforward. It's just like the while loop, you just start with the code that you want to have executed and then the condition that you want to have met.

Important Note!!!

The code in this loop is evaluated at the end of the loop, unlike the while loop. So the code will always be executed one more time extra, even when the condition isn't met.

For...In Loop

The for...in is a special type of loop that iterates over the properties of an object.

The goal for our last two loops is to print out the members of The Beatles.

let beatles = {
'Paul': 'McCartney',
'John': 'Lennon',
'George': 'Harrison',
'Ringo': 'Starr'
}

for(let member in beatles){
    console.log(member + beatles[member]);
}

The loop counter in the for-in loop is a string, not a number. It contains the name of the current property.

For...Of Loop

The for...of loop does the same thing as the for...in loop pretty much. It iterates over the elements of an array. It also executes the code for each of the elements of the index of the array.

let beatles = ['Paul', 'John', 'George', 'Ringo']

for(let member of beatles){
    console.log(member);
}

Another important note to remember!

This loop doesn't work with objects like the for-in loop, because they are not iterable.

Conclusion

These are all of the loops in JavaScript. Of course, the ones that you are going to use the most are the for and while loop. The for...of loop is used all the time, while the for...in loop is pretty uncommon these days. And for the do...while loop, well, there isn't much to say. It isn't used that often. You will rarely want to execute a loop when a condition isn't met.