How to Use async/await with Array.map in TypeScript

By the end of this page, you will understand why Array.map() does not automatically wait for async callbacks, why it returns an array of promises, and how to correctly combine it with Promise.all() in TypeScript to get the final resolved values.

Array.map() is a synchronous array method. Its job is simple: take each item in an array, run a callback, and return a new array containing the callback results.

When the callback is marked async, it always returns a promise. That means map() does not produce number[] anymore. It produces Promise<number>[].

So this code:

arr.map(async (item) => item + 1)

returns something like:

[Promise<number>, Promise<number>, Promise<number>, ...]

That is why TypeScript complains. You are trying to assign an array of promises to a variable typed as an array of numbers.

To turn Promise<number>[] into number[], you need Promise.all().

Promise.all() takes an array of promises, waits for all of them to finish, and gives back a single promise containing an array of resolved values.

Think of Array.map() as a factory conveyor belt.

• A normal callback puts finished products on the belt.
• An async callback puts claim tickets on the belt instead of finished products.

Each claim ticket says, "A result will be ready later."

So after map(), you do not have the final products. You have tickets: Promise[].

Promise.all() is the collection desk that waits until every product is ready, then hands you the complete box of real results.

• map() = create one result per input
• async = each result is promised later
• Promise.all() = wait for all promised results

Core syntax

const promises = arr.map(async (item) => {
  return someAsyncWork(item);
});

const results = await Promise.all(promises);

A shorter version:

const results = await Promise.all(
  arr.map(async (item) => {
    await someAsyncWork(item);
    return item + 1;
  })
);

Correct version of your example

const arr = [1, 2, 3, 4, 5];

const results: number[] = await Promise.all(
  arr.map(async (item): Promise<number> => {
     (item);
     item + ;
  })
);

Consider this code:

async function addOneLater(n: number): Promise<number> {
  return n + 1;
}

async function run() {
  const arr = [1, 2, 3];

  const results = await Promise.all(
    arr.map(async (item) => {
      const value = await addOneLater(item);
      return value;
    })
  );

  console.log(results);
}

Step by step:

1. arr is [1, 2, 3].
2. map() starts running the callback for each item.
3. For 1, the callback returns a Promise<number>.

Fetching multiple API resources

const userIds = [1, 2, 3];

const users = await Promise.all(
  userIds.map(async (id) => {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  })
);

Reading multiple files

const fileNames = ["a.txt", "b.txt", "c.txt"];

const contents = await Promise.all(
  fileNames.map(async (name) => {
    return readFile(name, "utf8");
  })
);

Running validation checks

const emails = ["a@test.com", "b@test.com"];

const results =  .(
  emails.( (email) => {
     (email);
  })
);

In real projects, developers often use map() with async work in a few common patterns.

1. Parallel processing with Promise.all()

Use this when tasks are independent and can run at the same time.

const enrichedUsers = await Promise.all(
  users.map(async (user) => ({
    ...user,
    profile: await fetchProfile(user.id),
  }))
);

2. Guard clauses before async work

const results = await Promise.all(
  items.map(async (item) => {
    if (!item.enabled) {
      return null;
    }

    return processItem(item);
  })
);

3. Validation before mapping

if (items.length === 0) {
   [];
}

 output =  .(items.(saveItem));

1. Awaiting map() directly

Broken code:

const results = await arr.map(async (item) => item + 1);

Why it is wrong:

• map() returns an array immediately
• await on that array does not resolve the inner promises into values

Fix:

const results = await Promise.all(
  arr.map(async (item) => item + 1)
);

2. Expecting async callbacks to return plain values

Broken code:

const values: number[] = arr.map(async (item) => item + 1);

Why it is wrong:

• an async function always returns

// Wrong
const results = await arr.map(async (item) => item + 1);

// Right
const results = await Promise.all(
  arr.map(async (item) => item + 1)
);

Rules

• async function always returns Promise<T>
• Array.map() is synchronous
• map(async ...) returns Promise<T>[]
• Promise.all(Promise<T>[]) returns Promise<T[]>
• await Promise.all(...) gives T[]

Common patterns

const results = await .(items.(doAsyncWork));

Why does Array.map() return Promise[] with an async callback?

Because an async function always returns a promise. map() collects those return values as-is.

Can I use await directly on arr.map(...)?

No. arr.map(...) returns an array, not a single promise that resolves all inner results.

What is the correct way to use async with map()?

Use Promise.all() around the map() result:

const results = await Promise.all(arr.map(asyncFn));

Is Promise.all() parallel?

It starts all mapped async operations without waiting for one another, so they can run concurrently.

What if one mapped promise fails?

Promise.all() rejects immediately with that error.

• Promise.all() — directly related because it resolves the array of promises created by map(async ...).
• async/await — the core syntax that turns asynchronous code into a more readable form.
• Promises — necessary for understanding why async functions return future values.
• Array.map() — important because it transforms arrays synchronously.
• for...of loop — a common alternative when async tasks should run one at a time.
• Promise.allSettled() — useful when you want all results even if some async operations fail.
• Array.forEach() — often confused with map() in async code, but behaves differently.
• TypeScript types — helpful for understanding errors like Promise<number>[] vs number[].