← Go Back

Async Foreach

Broken Post?Let me know

Read an article Exploring the JavaScript forEach Method for Looping Over Arrays by Jack Misteli today.

Jack announced the post on Coding Blocks Slack channel, and mentioned that,

I think most of you won't learn anything here it's pretty beginner stuff, hopefully there will be a nugget of new information.

He was right. I did get "a nugget of new information".

Wasn't aware of async foreach method can work differently that I thought.
Setting await outside Array#foreach doesn't necessarily await/resolve promise inside it.


Reproducing the behavior

An await on Array#foreach would not resolve promise(s) inside it.

In the code snippet below, following output will print all at once after one second, NOT wait 1 second per number.

const waitFor = ms => new Promise(r => setTimeout(r, ms))

;[1, 2, 3].forEach(async n => {
  await waitFor(1000)
  console.log(`first number`, n)
})

result after 1 second (1000 milliseconds).

first number 1
first number 2
first number 3

Go ahead and click the play ▶ button to run the sample below.

But what if you want to wait for 1 second per each iteration?

Using asyncForEach method

I also googled and foudn this articled, JavaScript: async/await with forEach(), which dived deeper into the particular topic.

The author, Sébastien Chopin, created a wrapper method named asyncForEach, which accepts an array, and a callbac, to operate on the array.

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array)
  }
}

It reads like, given an array, await on callback of each array item.

The code below

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array)
  }
}

const waitFor = ms => new Promise(r => setTimeout(r, ms))
async function main() {
  asyncForEach([1, 2, 3], async n => {
    await waitFor(1000)
    console.log(`main 'asyncForEach' num=${n}`)
  })
}

main()

results in following output, where each line is printed after one second.

main 'asyncForEach' num=1
main 'asyncForEach' num=2
main 'asyncForEach' num=3

Go ahead and click the play ▶ button to run the sample below.

Using "for await...of".

There is a new syntax in town, for await...of, which became avaiable in ECMAScript2018.

Let's say, you are mapping over an array, which does an async task.

Overly contrived for brevity

// You can use `fetch` logic here to get users or posts, etc. for `getN`.
const getN = async n => n
const waitFor = ms => new Promise(r => setTimeout(r, ms))

async function main() {
  for await (const n of [1, 2, 3].map(getN)) {
    await waitFor(1000)
    console.log(`main 'for await of' num=${n}`)
  }
}

main()

The code above will output each line every second, not at once.

main 'for await of' num=1
main 'for await of' num=2
main 'for await of' num=3

The behavior is the same as using asyncForEach wrapper, just imperative.

Bonus

Jack extended Array prototype as

Array.prototype.asyncForEach = async function(callback) {
  let k = 0
  while (k < this.length) {
    if (!this[k]) return
    let element = this[k]
    // This will pause the execution of the code
    await callback(element, k, this)
    k += 1
  }
}

and my friend, Nicolas Marcora helped me to understand the simplified implementation.

Array.prototype.asyncForEach = async function(callback) {
  for (const index in this) {
    const element = this[index]
    // This will pause the execution of the code
    await callback(element, index, this)
  }
}

for...in would return an index of the this array, and you can get an element of each, which you can await on.


Image by PublicDomainPictures from Pixabay