DEV Community

Cover image for JavaScript Loops And How To Use Them
Boyan Iliev
Boyan Iliev

Posted on • Originally published at devdojo.com

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)
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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]);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (7)

Collapse
 
kubeden profile image
Kuberdenis

Loving to refresh basics by a read every once in a while! Great post!

Collapse
 
boiliev profile image
Boyan Iliev

Thanks a lot😃

Collapse
 
alexgeorgiev17 profile image
Alex Georgiev

Nice content, Boyan!

Collapse
 
boiliev profile image
Boyan Iliev

Thank you, Alex!

Collapse
 
mjawad71 profile image
محمد جواد

Hello, Can you add forEach() to this article?

Collapse
 
boiliev profile image
Boyan Iliev

Yeah, I'll add it in the next article I write. It will be done in the next couple of days.

Collapse
 
boiliev profile image
Boyan Iliev

Hey, I just added the forEach() method in my new post. Here's the link to it:

dev.to/boiliev/array-methods-and-c...