Normalize iterable data
Convert strings, Sets, Maps, generators, or other iterable values before using array methods.
JS Puzzles · Const
Array.from iterables
Array.from turns an iterable or array-like value into a real array. It can also transform each item while building that array.
How it works
Array.from takes an iterable or array-like value, creates a new ordinary array, and copies its elements in iteration order. An optional mapping function can transform each element during creation, with an optional thisArg supplying its this value.
Syntax
Array.from(obj[, mapFn, thisArg])Parameters
| Name | Type | Description |
|---|---|---|
obj | iterable | array-like | An iterable or array-like value to convert into a real array. |
mapFn | function | Optional function applied to each element before it is added. |
thisArg | any | Optional this value used while mapFn runs. |
Returns
A new, ordinary Array containing the copied values.
Key points
- It is useful for turning iterable data into a normal array so array methods can be used.
- The operation creates a separate result and copies source items into it.
- mapFn transforms each value during construction, before insertion into the output.
- thisArg controls the receiver seen by the mapping function.
- A custom value qualifies as an iterable when it supplies Symbol.iterator.
Common mistakes
- Missing indexed properties are represented as undefined rather than leaving holes in the resulting array.
- Array.from is synchronous and is not the choice for consuming asynchronous iterables.
Example: Convert iterables and map values
const chars = Array.from("hello");
const doubled = Array.from(new Set([1, 2, 2]), n => n * 2);
console.log(chars); // ["h", "e", "l", "l", "o"]
console.log(doubled); // [2, 4]Converts a string and a Set into ordinary arrays; the mapping function transforms each Set value before it is added.
When to use it
Convert and transform
Create a transformed array in one operation with the optional mapping callback.
Handle array-like values
Convert array-like objects such as indexed collections into ordinary arrays.
Interview questions
QWhat does Array.from do?
Array.from creates a new real Array from an iterable or array-like object. For an iterable, it reads values through the iterable protocol and places them into the new array.
Follow-up: How does it differ from spread syntax? Array.from supports array-like objects as well as iterables, whereas spread syntax only supports iterables.
QWhat are Array.from's optional arguments?
The second argument is mapFn, which runs for every source element before that element is inserted into the result. The third argument, thisArg, sets the this value used by mapFn.
Follow-up: Why use Array.from with mapFn instead of calling map afterward? It performs conversion and transformation in one creation step, avoiding a separate mapping pass.
QWhat does Array.from return, and does it create sparse arrays?
Array.from returns a new Array instance and does not mutate the source. It also produces a dense array, so absent indexed properties become undefined rather than holes.
Follow-up: What should be used for an async iterable? Use Array.fromAsync, which is specifically documented for asynchronous iteration.
Related
iterableSymbol.iteratoriteratormapFnthisArgArray.fromAsyncspread syntax