You want to execute an async function inside a map() call, to perform an operation on every element of the array, and get the results back.

How can you do so?

This is the correct syntax:

const list = [1, 2, 3, 4, 5]

const functionThatReturnsAPromise = item => {
  return Promise.resolve('ok')
}

const doSomethingAsync = async item => {
  return functionThatReturnsAPromise(item)
}

const getData = async () => {
  return Promise.all(list.map(item => doSomethingAsync(item)))
}

getData().then(data => {
  console.log(data)
})

The main thing to notice is the use of Promise.all(), which resolves when all its promises are resolved.

list.map() returns a list of promises, so in result we’ll get the value when everything we ran is resolved.

Remember, we must wrap any code that calls await in an async function.

Here’s a practical example using Prisma to delete tweets and then users:

export const clearData = async (prisma) => {
  const users = await prisma.user.findMany({})
  const tweets = await prisma.tweet.findMany({})

  const deleteUser = async (user) => {
    return await prisma.user.delete({
      where: { id: user.id }
    })
  }
  
  const deleteTweet = async (tweet) => {
    return await prisma.tweet.delete({
      where: { id: tweet.id }
    })
  }

  const deleteTweets = async () => {
    return Promise.all(tweets.map((tweet) => deleteTweet(tweet)))
  }

  const deleteUsers = async () => {
    return Promise.all(users.map((user) => deleteUser(user)))
  }

  deleteTweets().then(() => {
    deleteUsers()
  })
}

Await in loops

You can also use await inside a for..of loop to iterate an array and await inside the loop:

const fun = (prop) => {
  return new Promise(resolve => {
    setTimeout(() =>
      resolve(`done ${prop}`), 1000);
  })
}

const go = async () => {
  const list = [1, 2, 3]
	
  for (const prop of list) {
    console.log(prop)
    console.log(await fun(prop))
  }
  
  console.log('done all')
}

go()

You need to place the loop in an async function, then you can use await and the loop stops the iteration until the promise we’re awaiting resolves.

You can do the same with a for..in loop to iterate on an object:

const go = async () => {
  const obj = { a: 1, b: 2, c: 3 };

  for (const prop in obj) {
    console.log(prop)
    console.log(await fun(prop))
  }
  
  console.log('done all')
}

You could also use while or do..while or for loops too with this same structure.

But you can’t await with Array.forEach() or Array.map() directly - use the Promise.all() pattern shown above instead.

Slowing down a loop

Sometimes you want to slow down a loop, for example when calling an API that has rate limiting.

Create a simple sleep function:

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

Then you can call await sleep(1000) to pause 1 second in every iteration:

const list = [1, 2, 3, 4]
const doSomething = async () => {
  for (const item of list) {
    await sleep(1000)
    console.log('🦄')    
  }
}

doSomething()

Lessons in this unit:

0:	Introduction
1:	Callbacks
2:	Timers
3:	Promises
4:	Async functions
5:	Chaining promises
6:	Orchestrating promises
7:	Top-level await
8:	▶︎ Async with array methods
9:	Converting callbacks to async/await