"Confused about handling async/await inside Array.map() in Node.js"

[CODEhunt89]

Select Topic Area

Question

Body

Hi everyone ,
I’m working on a small Node.js project and got stuck with something.
I’m trying to use async/await inside Array.map(), but the behavior is not what I expected.
Here’s a simplified version of my code:

const fetchData = async (id) => {
// simulating async call
return new Promise((resolve) => {
setTimeout(() => resolve(Data for ${id}), 1000);
});
};

const process = async () => {
const ids = [1, 2, 3];
const results = ids.map(async (id) => {
const data = await fetchData(id);
return data;
});

console.log("Results:", results);
};

process();

Instead of logging the fetched data, I just get an array of Promises:

Results: [ Promise { }, Promise { }, Promise { } ]
I know I can fix this by using Promise.all, like:

const results = await Promise.all(ids.map(fetchData));

But my doubt is:
Is async/await inside map() always supposed to behave like this?
Why doesn’t await inside the callback automatically resolve things?
Are there any cases where using map(async …) is still the right approach?
I’d love to understand the reasoning behind this behavior rather than just the workaround.

[jfullstackdev]

if I'm getting it correctly, when you do:

const results = ids.map(async (id) => {
  const data = await fetchData(id);
  return data;
});

• the callback inside map is async, so it always returns a Promise
• Array.map() does not know or care about Promises, it just collects whatever the callback returns
• therefore, results is an array of Promises, not the resolved values

this is why you saw:

Results: [ Promise { }, Promise { }, Promise { } ]

---

how to get Resolved Values

You need to wait for all the Promises to resolve. The standard way:

const results = await Promise.all(ids.map(async (id) => {
  const data = await fetchData(id);
  return data;
}));

console.log(results);
// ["Data for 1", "Data for 2", "Data for 3"]

Or, since fetchData already returns a Promise:

const results = await Promise.all(ids.map(fetchData));

Both are equivalent.

---

why await inside map() doesn’t “auto-resolve”

• await only works inside an async function.
• Array.map() itself is not async, it doesn’t wait for anything.
• Each callback’s await pauses that callback, but map() immediately collects all returned Promises.
• There’s no built-in mechanism for map() to wait on Promises automatically.

Think of it as:

map(): call function on each element → collect return values → done
async function inside map(): returns Promise immediately → map collects promises → map finishes

---

when is map(async …) still okay?

• When you intend to work with an array of Promises, e.g., for Promise.all later.
• When you want lazy execution without awaiting immediately.

Example:

const promises = ids.map(async id => {
  const data = await fetchData(id);
  return data;
});

// do other things here

const results = await Promise.all(promises);

• This lets you start all async tasks concurrently, instead of awaiting one by one in a loop.

---

alternative: for…of with await

If you want to process each item sequentially, you can use for…of:

const results = [];
for (const id of ids) {
  const data = await fetchData(id);
  results.push(data);
}
console.log(results);

• This awaits each async operation one after another.
• Useful if order matters or tasks are heavy and you want sequential execution.

---

Summary

Approach	Returns	Execution
map(async …)	Array of Promises	Starts all async tasks immediately, concurrent
await Promise.all(map(async …))	Array of resolved values	Waits for all tasks to finish, concurrent
for…of + await	Array of resolved values	Waits sequentially, one by one

---

so,

• map() doesn’t await async callbacks automatically
• using map(async …) is fine if you wrap it in Promise.all or otherwise handle the Promises
• for sequential execution, use for…of

[PadhikariDev]

Usually await works inside the async function only, it does not care about the outer scope. Outside, the function scope it still returns a promise so map just gives you an array of promises .

[itzdheerajsingh]

Yes — this behaviour is expected.

• Array.map() does not “await” anything. It just runs the callback for each element and returns a new array immediately.
• If your callback is async, it will always return a Promise. So the result of map(async …) is an array of Promises, not the resolved values.

That’s why your log shows:

[ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ] 

🔑 Key Points:

1. async function always returns a Promise. Even if you return "hello"; in an async function, it’s really returning Promise.resolve("hello")
2. map() doesn’t know about async . map() is synchronous — it doesn’t wait for Promises.
3. Solution → Promise.all()
   If you want the final values, you need to wrap themapresult with Promise.all:

const results = await Promise.all(ids.map(async (id) => { 
const data = await fetchData(id); return data;    })); 
console.log(results); // ["Data for 1", "Data for 2", "Data for 3"] 

4. When is map(async …) useful?
   When you want an array of Promises to handle later.
   Example: queueing multiple async tasks and resolving selectively

📌 Final Takeaway:
map() runs synchronously → async makes the return a Promise → You need Promise.all (or for…of with await) to resolve them.

[CODEhunt89]

Thanks to the whole team @jfullstackdev @PadhikariDev @itzdheerajsingh for the help!
Special thanks to @itzdheerajsingh for the detailed explanation — it really cleared my doubt!