DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

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

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

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

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

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

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

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

Example

Let's loop over an array of cars

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

cars.forEach((car) => {
     console.log(ele)
})
Enter fullscreen mode Exit fullscreen mode

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

Example

Let's loop over an array of cars

const cars = ["Mehran", "GLi", "Yaris", "Civic", "City"]

const newCars = cars.map((car) => {
     return car.toUpperCase()
})
Enter fullscreen mode Exit fullscreen mode

6. JavaScript for-of loop

for-of loop in JavaScript loops through the values of an array.

Syntax

for (element of iterable) {
     // code block
}
Enter fullscreen mode Exit fullscreen mode

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

7. JavaScript for-in loop

for-in loop in JavaScript loops through the properties of an object.

Syntax

for (key in object) {
     // code block
}
Enter fullscreen mode Exit fullscreen mode

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

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 πŸ’–.

Top comments (2)

Collapse
 
offline profile image
Offline

carKey is pretty funny

Collapse
 
mursalfk profile image
Mursal Furqan Kumbhar Author

I just try to keep my content as relaxing as possible. Not taking the chart to Booooooring side tho 😜

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.