You cannot use “async/await” directly within the callback function of a forEach loop because forEach does not wait for promises to resolve.
If you use async/await inside a forEach, the loop will not wait for the asynchronous operation to complete before moving on to the next iteration. This can lead to unintended behavior if you expect each iteration to complete before the next one starts.
To fix this issue, you can use a “for loop”, “for…of loop”, or “map() with Promise.all()” function to achieve the desired asynchronous behavior.
Method 1: Using a for loop with async/await
The traditional for loop allows you full control over the iteration process, making it easier to use async/await.
async function processItem(item) {
// Simulate a delay of 1 second using setTimeout and a Promise
return new Promise((resolve) => {
setTimeout(() => {
console.log('Processed item:', item);
resolve();
}, 1000);
});
}
async function processArray(array) {
for (let i = 0; i < array.length; i++) {
await processItem(array[i]);
}
console.log('All items processed');
}
processArray([11, 18, 19, 21]);
Output
Processed item: 11
Processed item: 18
Processed item: 19
Processed item: 21
All items processed
Method 2: Using a for…of loop with async/await
The for…of loop is more concise than the traditional for loop and works well with async/await.
async function processItem(item) {
// Simulate a delay of 1 second using setTimeout and a Promise
return new Promise((resolve) => {
setTimeout(() => {
console.log('Processed item:', item);
resolve();
}, 1000);
});
}
async function processArray(array) {
for (const item of array) {
await processItem(item);
}
console.log('All items processed');
}
processArray([11, 18, 19, 21]);
Output
Processed item: 11
Processed item: 18
Processed item: 19
Processed item: 21
All items processed
Method 3: Using the map() with Promise.all()
To process all elements concurrently and then wait for all of them to complete, you can use map() to create an array of promises and then use Promise.all() to wait for all promises to resolve.
async function processItem(item) {
// Simulate a delay of 1 second using setTimeout and a Promise
return new Promise((resolve) => {
setTimeout(() => {
console.log('Processed item:', item);
resolve();
}, 1000);
});
}
async function processArray(array) {
await Promise.all(array.map(async (item) => {
await processItem(item);
}));
console.log('All items processed');
}
processArray([11, 18, 19, 21]);
Output
Processed item: 11
Processed item: 18
Processed item: 19
Processed item: 21
All items processed
That’s it!

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.