# Fix async/await Issues with forEach Loops in JavaScript

> Avoid async/await pitfalls with forEach in JavaScript by using for...of loops for sequential processing or Promise.all with map for parallel execution

**URL:** https://sentry.io/answers/are-there-any-issues-with-using-async-await-with-foreach-loops-in-javascript/

---

## The Problem

Consider the following JavaScript code:

```javascript
const requests = await getRequests();

await requests.forEach(async (request) => {
  await process(request);
});

await notifyCompletion("All requests processed.");
```

At first glance, this code appears straightforward. We retrieve a set of `request` objects, use a `forEach()` loop to process them, and call `notifyCompletion()` once our processing is done. All of our custom functions are `async`, so we correctly `await` their results.

But if we run this code, we may start to encounter unexpected behavior. What's wrong with it?

The main problem is that [`Array.prototype.forEach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) predates the implementation of the [`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) pattern, which relies on [`Promise`s](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). `forEach()` does not return a `Promise`, so the `await` in front of `requests.forEach()` will do nothing.

A second problem is that `await` in `await process(request)` is inside a callback function, and thus will not halt execution of the outer function where `forEach()` resides. `forEach()` will invoke its callback function for each `request` in `requests` as quickly as possible, without waiting for any of the previous `process()` calls to return. This means our requests will be processed in parallel rather than in sequence, which may or may not be what we want.

An additional, more serious consequence of the `forEach()` loop not pausing execution to wait for the results of `process()`, is that our code may execute `notifyCompletion()` *before* all requests have been fully processed. In the best case scenario, our code will send a completion notification slightly before all requests have been handled; in the worst, our code will send a completion notification slightly before crashing from an uncaught error in one of the `process()` calls.

## The Solution

How can we rewrite this code to do what it appears to be doing? There are a couple of different approaches we can take, depending on whether we would like requests to be processed in sequence or in parallel.

To process requests in sequence, we can replace `forEach()` with JavaScript's [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) statement (introduced in 2015):

```javascript
const requests = await getRequests();

for (const request of requests) {
  await process(request);
}

await notifyCompletion("All requests processed.");
```

Individual iterations of this loop are part of the same function as the surrounding code, and so the `await` inside the loop will cause execution to pause on every iteration of the loop. `notifyCompletion()` will only execute once all iterations of the loop have completed.

To process requests in parallel, we can use [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) and [`Array.prototype.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map):

```javascript
const requests = await getRequests();

await Promise.all(requests.map(async (request) => {
  await process(request);
}));

await notifyCompletion("All requests processed.");
```

`Promise.all()`, unlike `forEach()`, can be `await`ed, and so we can be assured that all of our requests will be processed before `notifyCompletion()` is called.

---

*Source: [sentry.io/answers/are-there-any-issues-with-using-async-await-with-foreach-loops-in-javascript/](https://sentry.io/answers/are-there-any-issues-with-using-async-await-with-foreach-loops-in-javascript/)*