MDN Web Docs: The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Today I found myself in a situation where I had to use an asynchronous function inside of an Array.map. Needless to say, Array.map is a synchronous function. Therefore, I had a slight problem in my hands.
I came across this problem while refactoring my code to get rid of a nasty “for..of”. Basically, I had an Array of objects upon which I had to make several calculations. One of these calculations involved making a call to an API which, of course, is asynchronous. Before my refactoring, I had no problem with using async/await inside my for..of loop. However, after making the switch to Array.map, I realized it wouldn’t be as simple.
Here’s what I did:
As you can see, my getDistance function simulates a call to an API, and returns a Promise.
Note: The return value of async functions is always a Promise
This means that our Array.map function will return an Array of unresolved promises. Therefore, outside of the Array.map, we have to wait for all the promises to be resolved before we can make use of the resulting Array. This is why we use Promise.all().
Note: If you aren’t comfortable with async/await syntax, you can always resort to good ol’ “.then”
You can check out and play with my solution in the following CodePen:
Pretty simple, right? It took me a while to figure it out…
Which is why I decided to share my solution, in case someone else encounters this issue. I hope it helps! Thank you for reading, feel free to share or leave a comment :)
P.S. You can check out my Github and Twitter pages if you like...
This series of posts document a high-level process to use when planning a modern web application, from project organization, collaboration considerations and tooling choices during development, all the way through deployment and performance strategies.