How to use async/await with forEach loop in JavaScript ?
Last Updated :
20 Dec, 2023
Asynchronous is popular nowadays because it gives functionality of allowing multiple tasks to be executed at the same time (simultaneously) which helps to increase the productivity and efficiency of code.
Async/await is used to write asynchronous code. In JavaScript, we use the looping technique to traverse the array with the help of forEach loop.
NOTE: Using async/await
with forEach
loop in JavaScript can be a bit tricky since forEach
doesn’t inherently support asynchronous operations
- The
processArray
function iterates over an array asynchronously using a for...of
loop.
- An asynchronous operation is simulated by the
someAsyncFunction
, utilizing setTimeout
within a Promise
.
- The
await
the keyword is used inside the loop to pause execution until the asynchronous operation for the current item is complete.
- The provided code demonstrates the asynchronous processing of an array (
myArray
) using the processArray
function, allowing controlled execution of asynchronous operations for each item.
Example: This example shows the implementation of the above-explained approach.
Javascript
async function processArray(array) {
for (const item of array) {
await someAsyncFunction(item);
}
}
async function someAsyncFunction(item) {
return new Promise(resolve => {
setTimeout(() => {
console.log(item);
resolve();
}, 1000);
});
}
const myArray = [1, 2, 3, 4, 5];
processArray(myArray);
|
Output:Â
Using Promise.all()
with map
- In this appraoch, we are creating a function in which we are creating a promise.
- We are creating another function and returning a promise. in which we are using setTimeout() function to print the item in th console.
- After that we are declaring an array and passing it to the above created function.
Example: This example shows the implementation of the above-explained approach.
Javascript
async function processArray(array) {
await Promise.all(array.map(async item => {
await someAsyncFunction(item);
}));
}
async function someAsyncFunction(item) {
return new Promise(resolve => {
setTimeout(() => {
console.log(item);
resolve();
}, 1000);
});
}
const myArray = [1, 2, 3, 4, 5];
processArray(myArray);
|
Output:
Explanation: Due to the delay in printing elements, another element ” for ” is printed before the first element “geeks” in myArray to save time. It depicts that the asynchronous function run simultaneously.
Share your thoughts in the comments
Please Login to comment...