JS: Async/Await in Array Methods
Asynchronous Programming is one of the great features in Javascript. Before ES8 we had Callbacks, Promises and Generators to handle it. But in ES8, Javascript introduced very short keywords called Async and Await to handle Asynchronous Executions.
In this story, I am going to explain the strange behaviour of Async/Await inside the Array Methods such as Map, Reduce, Filter, etc. I got the idea to write this article when I was answering a Stackoverflow Question. Because Still, beginners are struggling to understand this concept.
Before start, I assume that you know the basics of Async/Await. Because In this story I will only talk about that particular strange behaviour. Okay, enough talking let’s move into the topic. 🚀
The Basic Async/Await
In the above code, You all can understand that we have an async function to convert a string to uppercase. The main function will call the function convertToUpperCase with the await keyword. Because we are waiting for the function to convert it so we can print it in the console. It will print output as you expected.
All fine so far right. But what If we do the same thing inside an array method map() or forEach()?
Async / Await in Map()
Now we have an Array of words [“orange”, “apple”, “mango”]. Now we need to convert all the words to uppercase. So we need to take each word from an array using map() then update each word by passing it to the convertToUpperCase() method with the await keyword. So it will convert all the words one by one. Finally, we will have an Array of uppercased words.
Ok, Let’s do it and see.
Output:
But if you see the output, We did not receive the expected results. The map() method returned an Array of Promises instead of an Array of Strings.
Why? 🙄
You may say that we passed an async method inside the map(), So we need to use await in front of it like below,
But nope. Still, the Same result. 😞
Then what is the exact problem?
Why is this returning Promise even if we use await?
The Reason
First, remember these 2 key points about Async/Await
- The async function will return a Promise itself.
- You cannot use await inside a normal function.
As we saw above, The async functions always return promise unless you call it with the await keyword. But to use await keyword, The parent function also should be an async function.
Let’s have look at our scenario. The function convertToUpperCase() is an async function. So it will return a Promise. But we want an final string value, So we are using await when calling the convertToUpperCase() method. Also, We cannot use await inside a normal function. So our callback function should be an async function.
Now take the map() method. The array methods are not async functions. They are normal functions. So when we pass an async function as a callback, It will not invoke the async callback function with await. So the output result will be a Promise.
This is why we are getting 3 Promises instead of 3 string values.
So what is the solution? Can’t we use async/await inside Array Methods?
Don’t worry you can. 😋
Promise.all()
The job of Promise.all() is taking an Array of Promises and return values after all the promises are resolved.
In our case, We got an Array of Promises right? So here Promise.all() will help us to extract the resolved values from the Array of Promises.
NOTE: Please remember that the Promise.All() will return a single Promise. So we need to use await to get the actual value.
The Output:
Oh, yeah! Now we got the exact output that we wanted. 🥳
Conclusion
Not only for the map() method. You can apply the above way to solve these kinds of issues in all array methods and other functions that do not handle async callbacks with await.
If you are new to Promise, Async and Await. I am pretty sure it might be so confusing. But don’t worry, It happens. I strongly recommend you to study some basics of asynchronous javascript and do some hands-on. I will provide some useful links below.
If you find this story helpful, Please give some 👏 and feel free to correct me if I did any mistakes.
Thank you.
