Sanity Tip For JavaScript Devs: Learn to Run Asynchronous Functions in Array.map()
Tags: javascript, webdev, beginners, node
Published: 2019-06-13 10:08:07

---
title: Sanity Tip For JavaScript Devs: Learn to Run Asynchronous Functions in Array.map()
published: true
description: Run asynchronous tasks within map by returning a promise and waiting for the new array of pending promises to resolve.
tags: #javascript #webdev #beginners #node
---

### The Problem
I was writing some API code recently using Node.js, and came across a place where I needed to use `Array.map()` with an `async` function on each item. I was briefly surprised when my map call did not work right. Logging the output of the map function would show this: 
```
[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
]
``` 
I was expecting to get an array of objects which each would be returned from an asynchronous API call inside the map function, but got this.

### Why Use Asynchronous Function Inside `Array.map()`

`Array.map()` is a synchronous operation and runs a function on each element in the array resulting in a new array with the updated items. There are situations where you want to run asynchronous functions within map, e.g. updating a list of models and push the changed information back to the database or request information from an API that you want to use for further operations.
Let’s solve the problem of running an asynchronous operation in a synchronous function!

### The Solution: `Promise.all`
An approach to perform async actions in `array.map()` is to return a promise for each item which then resolve outside the map function. Because map won’t wait for the promise to resolve, it’ll return a pending promise.

You need to take care of all promises in the array returned from map to resolve before using their results. Do this with `Promise.all(<array-of-promises>)`. The result of waiting for all promises to finish is another array containing the results.

Let’s visualize the idea with an example:

```javascript
const list = [] //...an array filled with values

const functionWithPromise = item => { //a function that returns a promise
  return Promise.resolve('ok')
}

const anAsyncFunction = async item => {
  return await functionWithPromise(item)
}

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

const data = getData()
console.log(data)
```

`async`/`await` is one of my favorite new features in JavaScript as it makes asynchronous JavaScript code much more readable. If you’re like me, you’ll find `Promise.all` incredibly helpful while working with `async`/`await`.

The main thing to notice is the use of `Promise.all()`, which resolves when all it’s 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.
I hope this has been helpful to you. Please make sure to leave a comment or any questions you may have down below.

### About Me
I am a full stack web developer and co-founder of [Bits n Bytes Dev Team](https://www.bitsnbytes.ir), a small group of highly talented and professional freelance developers, where we provide custom web application development services based on cutting-edge technologies, tailored to client's unique business needs.  

I'm available for hire and you can check out my portfolio website at https://www.bitsnbytes.ir/portfolio or contact me at raadi@bitsnbytes.ir.