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 💖.
Top comments (2)
carKey is pretty funny
I just try to keep my content as relaxing as possible. Not taking the chart to Booooooring side tho 😜