07 Type of Loops in JavaScript
Tags: javascript, beginners, webdev, react
Published: 2022-08-28 04:49:33

In this post, we will go through different ways of **Looping in JavaScript**, of course, with the help of examples. So basically, there are these main types of loops in JavaScript:

- for
- while
- do-while
- forEach()
- map()
- for-of
- for-in

## 1. JavaScript _for_ loop
**_for_** loop in JavaScript loops through a block of code a number of times. 
### Syntax
```javascript
for (initialCondition; condition; updateExpression) {
     // code block
}
```
The _initialCondition_ executes 1 time before the execution of code block, the _condition_ defines the condition for executing the code block and the _updateExpression_ executes every time after the code block has been executed.
### Example
Let's loop over an array of cars
```javascript
const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (let car = 0; car < cars.length; car++) {
     console.log(cars[car])
}
```

## 2. JavaScript _while_ loop
**_while_** loop in JavaScript loops through a block of code while a specified condition is true.
### Syntax
```javascript
while (condition) {
     // code block
}
```
In this below mentioned example, the code in the loop will run, over and over again, as long as the length of _cars_ array is not exhausted.
### Example
Let's loop over an array of cars
```javascript
const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

while (car < cars.length) {
     console.log(cars[car])
     car++
}
```

## 3. JavaScript _do-while_ loop
_do-while_ loop in JavaScript also loops through a block of code while a specified condition is true. The do-while loop is very similar to that of the while loop. But the only difference is that this loop checks for the conditions available after we check a statement. Thus, it is an example of a type of Exit Control Loop.
### Syntax
```javascript
do {
     // code block
} while (condition)
```
### Example
Let's loop over an array of cars
```javascript
const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

let car = 0;

do {
     console.log(cars[car])
     car++
} while (car < cars.length)
```

## 4. JavaScript _forEach_ loop
_forEach_ method calls a function for each element in an array and method is not executed for empty elements.
### Syntax
```javascript
array.forEach(function(currentValue, index, arr))
```
### Example
Let's loop over an array of cars
```javascript
const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

cars.forEach((car) => {
     console.log(ele)
})
```

## 5. JavaScript _map_ loop
_map_ loop in JavaScript creates a new array from calling a function for every array element. It calls a function once for each element in an array, does not execute the function for empty elements and also does not change the original array.
### Syntax
```javascript
array.map(function(currentValue, index, arr), thisValue)
```
### Example
Let's loop over an array of cars
```javascript
const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

const newCars = cars.map((car) => {
     return car.toUpperCase()
})
```

## 6. JavaScript _for-of_ loop
_for-of_ loop in JavaScript loops through the values of an array.
### Syntax
```javascript
for (element of iterable) {
     // code block
}
```
Here, element represents an iterable object (array, set, string, etc). While iterable represents items in the iterable object.
### Example
Let's loop over an array of cars
```javascript
const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

for (car of cars) {
     console.log(car)
}
```

## 7. JavaScript _for-in_ loop
_for-in_ loop in JavaScript loops through the properties of an object.
### Syntax
```javascript
for (key in object) {
     // code block
}
```
### Example
Let's loop over an array of cars
```javascript
const cars = {1:"Mehran", 2:"GLi", 3:"Yaris", 4:"Civic", 5:"City"}

for (let carKey in cars) {
     console.log(cars[carKey])
}
```
The for-in loop iterates over a cars object. Each iteration returns a key, carKey. The key is used to access the value of the key and the value of the key, i.e. cars[carKey] is returned.

I know this is quite a length one, but of you find this one interesting and helpful, do share it and give it a 💖.