Array.from()

A static on Array, not a method on an array. Its two superpowers: it handles array-LIKE objects that spread cannot, and its second argument maps as it builds.

Array static methodES2015Live demo
Common call
Array.from(nodeList)
Returns
a new array
Replaces
[].slice.call(arrayLike) from the ES5 era
Watch out
a non-iterable without a length gives an EMPTY array, not an error
Array.from(source[, mapFn[, thisArg]])
→ Array

Demo

Live evaluation
Try:
Inputs
sstringa string to expand
Output
Array.from('abc')
['a', 'b', 'c']

A string is iterable, so it expands to one element per character — the same as spreading it. What the demo cannot show is the case that makes Array.from genuinely necessary: array-LIKE objects such as a DOM NodeList or the old arguments object have a length but no iterator, and a spread cannot handle them while Array.from can.

Parameters

NameTypeRequiredDescription
sourceiterable | array-likeyesAnything iterable, or any object with a numeric length property. A plain object without length yields an empty array.
mapFnFunctionno (none)Called as mapFn(element, index) while building. Avoids the intermediate array that Array.from(x).map(f) would create.
thisArganyno (undefined)Value of `this` inside mapFn.

Return value

Array — A new real array. Accepts anything iterable (Set, Map, string, generator) and anything array-like (an object with a length).

Common patterns

Convert a NodeList or Set
The most common real use.
const els = Array.from(document.querySelectorAll("li"));
const unique = Array.from(new Set(values));
Build a range
The length-object trick, with the index as the value.
const range = Array.from({length: 5}, (_, i) => i);
Build a grid with independent rows
The factory runs per element — unlike fill, which shares one reference.
const grid = Array.from({length: 3}, () => new Array(3).fill(0));

Examples

1. From a string
Array.from('abc')
Returns
['a', 'b', 'c']
2. With a map
Array.from([1, 2], x => x * 2)
Returns
[2, 4]
3. A range
Array.from({length: 3}, (_, i) => i)
Returns
[0, 1, 2]
4. Length only
Array.from({length: 3})
Returns
[undefined, undefined, undefined]
5. Deduplicate
Array.from(new Set([1, 1, 2]))
Returns
[1, 2]
6. Non-iterable is empty
Array.from(123)
Returns
[]

Pitfalls

1. A non-iterable gives an empty array, not an error
Passing a number, or a plain object with no length, returns [] silently. Nothing throws, so the mistake surfaces later as a loop that never runs.
Silently empty
Array.from({a: 1})
[]
Use the values
Object.values({a: 1})
[1]
2. Array.from({length: n}) gives undefined, not holes
A useful difference from new Array(n). These are real undefined values, so map and forEach DO visit them — which is why the length-object idiom works where new Array(n).map does not.
Holes are skipped
new Array(3).map((_, i) => i)
[ <3 empty items> ]
Real undefined
Array.from({length: 3}, (_, i) => i)
[0, 1, 2]
3. It is a static, not an instance method
Array.from(x), never x.from(). Calling it on an array instance is a TypeError, which is a common slip when converting from a chained style.
Not on instances
[1, 2].from()
TypeError: [1,2].from is not a function
Call on Array
Array.from([1, 2])
[1, 2]
4. The map argument beats chaining
Array.from(x).map(f) builds an intermediate array and throws it away. The second argument maps during construction — one pass, one allocation.
Two arrays
Array.from(set).map(f)
works, allocates twice
One pass
Array.from(set, f)
same result

When to use

Use it
  • Converting a NodeList, Set, Map or arguments object to a real array
  • Array-like objects that a spread cannot handle
  • Building a range or a grid with a per-element factory
  • Mapping while converting, in a single pass
Reach for something else
  • The source is already an iterable and you want the shortest form → [...source]
  • You want the same value in every slot → fill, though watch the shared reference
  • The source is a plain object → Object.values or Object.entries

Notes

Complexity
O(n) — every element is copied, plus mapFn if supplied
Return
A new array; the source is not modified
CPython impl
V8: Builtins-array-from.tq
Memory
Allocates one array; the mapFn form avoids a second
Thread-safe
Single-threaded; the source is only read

FAQ

Spread is shorter for anything iterable. Array.from is required for array-LIKE objects that have a length but no iterator — older DOM collections and the arguments object — and it is better when you also want to map, since the second argument avoids an intermediate array.

Array.from(nodeList);     // works
[...nodeList];            // only if iterable

History

ES2015
Array.from added alongside Array.of, replacing the [].slice.call idiom.
ES2024
Array.fromAsync added for async iterables.