Home › Code Snippets › JavaScript › Reference › Array.fromAsync()

ECMAScript 2026

✅ Baseline Widely Available

Array.fromAsync()

Create a new array from an async iterable. Returns a Promise of the array.

Last updated: October 2026

Definition: Array.fromAsync(items, mapFn?, thisArg?) creates a new, shallow-copied Array instance from an async iterable, iterable, or array-like object. It returns a Promise that fulfills to the new array. Values are awaited sequentially — not concurrently [citation:9].

🎬 Live Example

Five common fromAsync patterns. Click any button to see the output.

Input:

Output:

💡 fromAsync awaits values sequentially — not in parallel.

📝

Basic Syntax

Array.fromAsync(items)
Array.fromAsync(items, mapFn)
Array.fromAsync(items, mapFn, thisArg)

// Returns: Promise<Array>
// Awaits each value sequentially
// Accepts async iterables, sync iterables, array-like objects

🎯 Syntax & Parameters

Parameter	Type	Description
`items`	async iterable \| iterable \| array-like	Source to convert to an array.
`mapFn`	Function	Optional. Runs on each element. Output is awaited.
`thisArg`	any	Optional. Value of `this` in mapFn.

Array from an Async Generator

async function* numbers() {
  yield 1;
  await new Promise(r => setTimeout(r, 100));
  yield 2;
  yield 3;
}

const arr = await Array.fromAsync(numbers());
// [1, 2, 3]
// Waited 100ms between 1 and 2

Works on Sync Iterables Too

await Array.fromAsync([1, 2, 3]);
// [1, 2, 3]

await Array.fromAsync(new Set([1, 2, 2, 3]));
// [1, 2, 3]

await Array.fromAsync('abc');
// ['a', 'b', 'c']

Pro tip: For sync iterables, each element is awaited before being added — useful when elements might be promises.

With mapFn (Async Mapping)

const doubled = await Array.fromAsync(
  [1, 2, 3],
  async (n) => n * 2
);
// [2, 4, 6]

// Sequential — waits for each map result

vs Promise.all() — Key Difference

// fromAsync — SEQUENTIAL, lazy
await Array.fromAsync(asyncGen());
// Waits for each value before requesting the next

// Promise.all — CONCURRENT, eager
await Promise.all(asyncGen());
// Requests all values upfront

Use fromAsync when: order matters, requests depend on previous results, or the source is a lazy generator.

Real-World: Paginated API Collection

async function* fetchAllPages() {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/items?page=${page}`);
    const data = await res.json();
    if (data.length === 0) break;
    yield* data;
    page++;
  }
}

const allItems = await Array.fromAsync(fetchAllPages());
// Collects every item across all pages

fromAsync is ideal for consuming paginated APIs without knowing the total page count upfront.

🎯 fromAsync vs Promise.all vs for await...of

Method	Returns	Use when
`Array.fromAsync`	Promise of array	Sequential, lazy async collection
`Promise.all`	Promise of array	Concurrent, independent operations
`for await...of`	Nothing (side effects)	Streaming, incremental processing

⚠️ Common Mistakes

Forgetting await. Array.fromAsync() returns a Promise. Missing await gives you a Promise, not an array.
Using it for concurrent work. fromAsync is sequential. Use Promise.all for parallelism.
Expecting deep copies. It creates a shallow copy.
Using it on infinite async iterables. It will never resolve. Use for await...of for streams.
Assuming older browser support. Check Baseline — Chrome 121+, Firefox 115+, Safari 16.4+.

❓ Frequently Asked Questions

What does Array.fromAsync() do in JavaScript?

Array.fromAsync() creates a new array from an async iterable, iterable, or array-like object. It returns a Promise that fulfills to the new array. Each value is awaited sequentially, making it ideal for paginated APIs and async generators.

What is the difference between Array.fromAsync() and Promise.all()?

Array.fromAsync() awaits each value sequentially and iterates lazily. Promise.all() retrieves all values in advance and awaits them concurrently. Use Array.fromAsync() for ordered or dependent async operations; use Promise.all() for independent parallel work.

When was Array.fromAsync() added to JavaScript?

Array.fromAsync() was approved as part of ECMAScript 2026 (June 2026). It is available in Chrome 121+, Firefox 115+, Safari 16.4+, and Edge 121+.

Can Array.fromAsync() handle synchronous iterables?

Yes. Array.fromAsync() accepts async iterables, sync iterables, and array-like objects. For sync sources, each element is awaited before being added to the result array.

Does Array.fromAsync() create a deep copy?

No. Array.fromAsync() creates a shallow copy. Nested objects and arrays are shared by reference with the original source.

🎯 What's Next?

🔗 Iterator.concat()

Combine iterables lazily.

📋 Array.from() Method

Sync version.

⚡ Promise.all() Method

Concurrent alternative.

📖 JavaScript Reference

All JavaScript references.

← All JavaScript Reference

Master Code On The Go