JavaScript Array from() Method

What You’ll Learn

Array.from() is a static method that builds a real array from iterables (strings, Sets, Maps) or array-like objects (NodeList, arguments). Optional map function transforms items during creation. This tutorial covers syntax, five examples, pitfalls with plain objects, and comparisons with spread and Object.values().

Introduction

Not everything in JavaScript is a true Array, even when it behaves like one. DOM node lists, the legacy arguments object, and strings can be iterated but lack array methods like map() or filter().

Array.from() converts those sources into a genuine array so you can use the full array toolkit. You can also pass a mapping function to transform values in the same step.

Understanding the Array.from() Method

Array.from(arrayLike, mapFn?, thisArg?) creates a new, shallow-copied array. The source must be either iterable (implements Symbol.iterator) or array-like (has length and indexed properties from 0 to length - 1).

The optional mapFn works like map() during construction—handy for squaring numbers or uppercasing strings without a separate pass.

📝 Syntax

General form of the static method:

Array.from(arrayLike, mapFunction, thisArg)

Parameters

• arrayLike — iterable or array-like object to convert.
• mapFunction — optional; called on each element (element, index).
• thisArg — optional this for mapFunction.

Return value

• A new Array instance.
• Shallow copy of elements from the source.
• Source object is not modified.

Common patterns

• Array.from("hi") — string to character array.
• Array.from(new Set(arr)) — Set to array (dedupe).
• Array.from(nodeList) — DOM NodeList to array.
• Array.from({ length: 5 }, (_, i) => i) — generate range.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const greeting = "Hello";

const chars = Array.from(greeting);

console.log(chars);
// ["H", "e", "l", "l", "o"]

["H", "e", "l", "l", "o"]

const fruits = new Set(["apple", "orange", "banana"]);

const upper = Array.from(fruits, (fruit) => fruit.toUpperCase());

console.log(upper);
// ["APPLE", "ORANGE", "BANANA"]

["APPLE", "ORANGE", "BANANA"]

const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };

const arr = Array.from(arrayLike);

console.log(arr);
// ["a", "b", "c"]
console.log(Array.isArray(arr));
// true

["a", "b", "c"]
true

const oneToFive = Array.from({ length: 5 }, (_, index) => index + 1);

console.log(oneToFive);
// [1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

const scores = { math: 90, english: 85, science: 92 };

console.log(Array.from(scores));
// []

console.log(Object.values(scores));
// [90, 85, 92]

[]
[90, 85, 92]

🚀 Common Use Cases

• DOM NodeList — convert query results to arrays for map/filter.
• Set to array — dedupe then process as a list.
• String processing — character arrays for algorithms or UI.
• Range generation — { length: n } plus map callback.
• Clone iterables — shallow copy into a mutable array.
• Map during copy — transform while converting (square, parse, format).

📝 Notes

• Static method—call Array.from(), not on an instance.
• Works on iterables and array-likes; not plain objects.
• Second argument is optional map—not the same as Array.from(arr, 2) depth.
• Shallow copy only; nested objects are shared references.
• [...iterable] is fine for iterables but not array-likes without iterator.
• ES2015—polyfill needed for IE11.

💡 Best Practices