# Understanding Loops In JavaScript

There are many kinds of loops in JavaScript. From `for` loops to `while` loops, this article covers them all and will teach you when and why to use each. 

This article is completely beginner friendly, so whether you are coming from a different language looking to learn the syntax or learning JavaScript as your first language, you will be able to understand clearly.

Lets start off by listing the different types of loop and exactly what they do.

## Types of Loops In JavaScript

- `for` - simply runs a block of code a certain number of types
- `for/in` - loops through properties of an object or indexes of an array
- `while` - runs a block of code while a condition is true
- `do/while` - same as while loop however runs code once before checking condition
- `forEach` - loops through an array

## The `for` loop

The `for` loop is a staple in many programming languages. It is present in some form in almost every programming language out there making it good to have an understanding of it in your toolbelt. 

Lets say we want to log the numbers 1 - 5 in the console. A `for` loop is a very simple solution since it will allow us to loop through exactly 5 times and log each number as we go. 

```javascript
for (let i = 1; i <= 5; i++) {
    console.log(i)
}
```

The above is an example of a `for` loop which simply logs the numbers 1 till 5 in the console. A `for` loop consists of 5 parts. 

The first is the keyword `for` which declares a for loop. This is followed by 3 statements in a pair of parenthesis. These include `let i = 1` which sets a counter for the loop and is run prior to the code being executed. 

The second statement is the condition for executing the code block. In this case, `i <= 5` which means it will run while the variable `i` is less than or equal to 5.

The third statement is executed every time after the code block has been executed. In this case, after the code runs `i` will increment by one (`i++`). 

> `i++` is the equivalent of `i = i + 1`, just in shorter syntax.

The final part of the `for` loop is the code block in between curly braces (`{` & `}`). In this case, it is simply logging the value of `i` to the console (`console.log(i)`).

`for` loops can be used to run code a certain amount of times, as done in this case. However, `for` loops can also be used to iterate over an array. For example, lets say we have an array of animals:

```javascript
const animals = ["dog", "cat", "fish", "turtle", "cow", "horse"]
```

We can use a `for` loop to iterate over the array and do anything we want with each animal:

```javascript
for (let i = 0; i < animals.length; i++) {
   const currentAnimal = animals[i];
   console.log(currentAnimal)
}
```

In the above example, we are looping through the animals array and logging each animal to the console. We set `i` to `0` since arrays are zero-based and by setting the condition to `i < animals.length` it will stop when we reach the end of the array. To select the item the loop is currently on, we can use `i` like this: `animals[i]`.

That just about covers the `for` loop, lets move on to the `for/in` loop which is similar however has a different purpose.


## The `for/in` loop

The `for/in` loop is also declared with the `for` keyword, however in the parenthesis, it only includes one statement with the keyword `in`. 

The `for/in` loop can be used to loop through properties of an object. Lets say we have an object called person:

```javascript
const person = {
   firstName: "Blake",
   middleName: "Kofi",
   lastName: "Yeboah"
}
```

This person has a `firstName`, `middleName`, and `lastName` which I have used my names as the values. Lets say we wanted to loop through the properties of this object. 

We can use a `for/in` loop:

```javascript
for (let property in person) {
   console.log(property)
}
```

This loops through each property of the object so the value of the `property` variable will equal `firstName`, then `middleName`, and finally `lastName`.

If we wanted to retrieve the values of these properties:

```javascript
for (let property in person) {
   const name = person[property]
   console.log(name)
}
```

We use the `person[property]` syntax to retrieve each name from the object.

In addition to looping through an object's properties, `for/in` loops can be used to loop through an array. For example, lets use the same animals array and loop through it:

```javascript
for (let i in animals) {
   const currentAnimal = animals[i]
   console.log(currentAnimal)
}
```

This loop iterates through the array and the index is stored in `i` or whatever you decide to call the variable. We can then retrieve the current index's item with:

```javascript
const currentAnimal = animals[i]
```

## The `while` loop

The `while` loop simply runs a block of code while a certain condition is true. The condition is passed in parenthesis after the `while` keyword. An example of a while loop looks like this:

```javascript
let i = 0;
while (i < 5) {
   console.log(i)
   i++;
}
```
In the above example, we are simply running a loop 5 times and printing numbers from 0 till 4. The condition of this `while` loop is `i < 5` which means run the code while `i` is less than 5. We defined `i` in the first line of code prior to the loop and set its value to `0`.  The final line of code in the code block, `i++;` increments `i` so that the every time the loop runs `i` is increased by 1.

> Its very important to increment `i` otherwise the loop will be endless and will keep running the code non-stop.

## The `do while` loop

The `do while` loop is very similar to the `while` loop however the code block is run before the condition is checked. This means that the even if the condition is false the code block will run once. A `do while` loop looks like this:

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

> Remember the increment `i++` to avoid an endless loop.

The `do while` loop can be used in replace of a regular while loop provided its fine for the code to run before the condition is checked. For example, in the loop above, its completely viable to replace the `while` loop with the `do while` loop. 

However, if the condition is checking if a variable exists, and this variable is used in the code block, it would be a bad idea to use a `do while` loop instead of a `while` loop.

## The `forEach` loop

The final loop we will be covering is the `forEach` loop. This loop is a high order method on arrays in JavaScript. This means the only purpose of this loop is to loop through an array. Lets use the animal array as an example again. For reference:

```javascript
const animals = ["dog", "cat", "fish", "turtle", "cow", "horse"]
```

We can loop through it with a `forEach` loop by calling the `.forEach` method:

```javascript
animals.forEach(function(animal) {
   console.log(animal);
})
```

The `.forEach` method takes in a callback function that has access to the current item its on in the array (`animal` in this case). This callback function also has access to the index as a separate parameter after the `animal` parameter.  This method is also covered in my **[JavaScript High Order Array Methods article](https://blog.blakeyeboah.com/javascript-high-order-array-methods)** which covers other methods relating to arrays..

The sole purpose of this loop is to iterate over an array. I personally think this is one of the most important types of loops to learn since iterating over an array is very common in most applications.

## Take Away

If you've reached the end of this article, congratulations! You now understand 5 different types of loops in JavaScript and can begin implementing them in your code. Make sure you are **practicing** using these loops to further develop your understanding and make you a better developer.

👌 Thanks for reading this article! 

If you like what I do and would love to see more related content, follow me on my other social platforms:

**GitHub:** [Blake-K-Yeboah](https://github.com/Blake-K-Yeboah)

**LinkedIn:** [Blake-K-Yeboah](https://www.linkedin.com/in/blake-yeboah/)

You can also show your support by buying me a coffee 😃
 
<a href="https://www.buymeacoffee.com/blakeyeboah"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=blakeyeboah&button_colour=855ff6&font_colour=ffffff&font_family=Cookie&outline_colour=ffffff&coffee_colour=FFDD00"></a>