JavaScript Loops And How To Use Them
Tags: javascript, webdev, 100daysofcode
Published: 2021-02-23 08:30:43

# 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.