The JavaScript Array.from() method
The Array.from() method creates a new array from an iterable or array-like value. Array.from("abc") gives ["a", "b", "c"], and Array.from(nodeList) turns a NodeList into a real array. An optional second argument maps each element as it's created.
Overview
Array.from() builds a genuine array out of something that isn't one. The two common inputs are iterables (strings, Set, Map) and array-like values (a NodeList from querySelectorAll, the arguments object) — things that have a length and indices but lack array methods. After Array.from(), you can use map(), filter() and the rest.
It takes an optional second argument: a map function applied to each element as the array is built, so Array.from(nodeList, el => el.textContent) converts and transforms in one pass. The spread operator [...iterable] does the same conversion for iterables, but it can't handle array-like values or take a map function — those are where Array.from() wins.
There's a neat trick using the length form: Array.from({length: 5}, (_, i) => i) generates [0, 1, 2, 3, 4] — a clean way to make a numeric range or seed an array of distinct objects (which fill() can't do safely). It's a static method on the Array constructor.
Syntax
Array.from(arrayLike)
Array.from(iterable, mapFn)
Array.from("abc") // ["a", "b", "c"]
Array.from(document.querySelectorAll("li")) // real array
Array.from({ length: 5 }, (_, i) => i) // [0, 1, 2, 3, 4]Parameters
The Array.from() method accepts the following parameters.
| Parameter | Description |
|---|---|
arrayLike |
An iterable or array-like value to convert into an array. |
mapFn |
Optional. A function called on each element as the array is built — like a built-in map(). |
Example
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
const range = Array.from({ length: 5 }, (_, i) => (i + 1) * 10);
const chars = Array.from('hello');
document.getElementById('out').textContent =
'range: ' + range.join(', ') + '\n' +
'chars: ' + chars.join('-'); // range: 10,20,30,40,50 / chars: h-e-l-l-o
</script>Best practices
- Use it to turn a NodeList or other array-like value into a real array.
- Pass the map function to convert and transform in one step.
- Generate ranges with
Array.from({length: n}, (_, i) => i). - For plain iterables, the spread
[...iterable]is a shorter equivalent (no map function or array-likes).
Frequently asked questions
How do I convert a NodeList to an array?
What is the difference between Array.from() and the spread operator?
Array.from() also handles array-like values (with a length) and accepts a map function; spread doesn't.How do I create a range of numbers?
Array.from({length: n}, (_, i) => i) to make [0, 1, ..., n-1].How do I create an array of distinct objects?
Array.from({length: n}, () => ({})) — unlike fill(), each slot gets its own object.