07 Type of Loops in JavaScript

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

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

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

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

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

do {
     // code block
} while (condition)

Example

Let's loop over an array of cars

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

array.forEach(function(currentValue, index, arr))

Example

Let's loop over an array of cars

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

array.map(function(currentValue, index, arr), thisValue)

Example

Let's loop over an array of cars

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

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

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

for (key in object) {
     // code block
}

Example

Let's loop over an array of cars

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