The Array.from() method

JavaScriptJunior~2 min read

Array.from() is the general-purpose way to create a new array from an iterable object (a string, a Set, a Map) or from an array-like one (arguments, a NodeList). It can also transform the elements on the fly, right as the array is being built.

Theory

TL;DR

Array.from() builds a real array out of an iterable or array-like value.
Signature: Array.from(arrayLike, mapFn, thisArg).
mapFn transforms every element during creation, like a built-in map().
An object such as { length: n } produces an array of that length, handy for sequences.
The method returns a new array and does not modify the source object.
If the value is neither iterable nor has a length, you get an error or an empty array.

Quick example

javascript

const str = 'hello';
const arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]

Syntax

javascript

Array.from(arrayLike, mapFn, thisArg);

Parameter	Description
`arrayLike`	An iterable or array-like object (string, `Set`, `Map`, `arguments`, `NodeList` and so on)
`mapFn` (optional)	A function applied to every element
`thisArg` (optional)	The `this` context for `mapFn`

Examples

1. From a string to an array of characters

javascript

const str = 'hello';
const arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]

2. From a Set

javascript

const set = new Set([1, 2, 3]);
const arr = Array.from(set);

console.log(arr); // [1, 2, 3]

3. From the array-like arguments

javascript

function example() {
  const args = Array.from(arguments);
  console.log(args); // [10, 20, 30]
}
example(10, 20, 30);

arguments is not a real array and has no methods such as map() or filter(), but Array.from() turns it into an ordinary array.

4. With element transformation through mapFn

javascript

const arr = Array.from([1, 2, 3], x => x * 2);
console.log(arr); // [2, 4, 6]

This is map() built straight into array creation, so no intermediate array is produced.

5. From an object with length, creating an array by size

javascript

const arr = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(arr); // [1, 2, 3, 4, 5]

Very convenient for generating numeric sequences: unlike new Array(5), this gives an array with no holes.

Things to remember

It returns a new array.
It does not modify the source object.
If arrayLike is neither iterable nor has a length property, the result is an error or an empty array.

Comparison with similar tools

Method	What it does
`Array.of(1, 2, 3)`	Creates an array from its arguments
`Array.from('abc')`	Creates an array from an iterable or array-like object
`[...iterable]`	Copies an iterable, but without a mapping function

The method in brief:

Question	Answer
What it does	Creates an array from an iterable or array-like object
What it returns	A new array
Does it mutate the original	No
Does it have a mapping function	Yes, as the second argument
Example	`Array.from('hi')` gives `["h", "i"]`

The practical difference from spread: [...value] only works with iterables, so [...{ length: 3 }] throws, while Array.from({ length: 3 }) returns [undefined, undefined, undefined].

Common mistakes

Expecting Array.from() to change the source object: it always returns a new array.
Spreading an array-like object with no Symbol.iterator, such as { length: 3 }, and getting a TypeError.
Writing Array.from(arr).map(fn) instead of the shorter Array.from(arr, fn).
Confusing Array.from(5) with Array.of(5): the first returns [] because a number is not iterable, the second gives [5].
Forgetting that Array.from({ length: 3 }) yields [undefined, undefined, undefined], not an empty array.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.