JavaScriptArraysIntermediate

Array.from()

Creates an array from an iterable or array-like object.

Review the syntaxStudy the examplesOpen the coding app
Array.from(arrayLikeOrIterable, mapFn?, thisArg?)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Creates an array from an iterable or array-like object.

Array.from() is a static utility method designed to transform array-like objects (objects with a length property and indexed elements) or iterable objects (such as Map, Set, or String) into true Array instances. This is particularly useful for gaining access to Array.prototype methods like .reduce() or .filter() on structures like DOM NodeLists or the arguments object. Performance is optimized when using the second parameter, mapFn, because it transforms elements during the creation process, avoiding the memory overhead of generating a temporary intermediate array. Note that Array.from() performs a shallow copy, meaning nested objects within the source remain referenced in the new array. IE is not supported for this method. A specific edge case involves array-like objects with negative or non-integer lengths; for instance, Array.from({length: -1}) returns an empty array [] instead of throwing a RangeError.

Quick reference

Syntax

Array.from(arrayLikeOrIterable, mapFn?, thisArg?)

Inputs

Parameters

arrayLikeOrIterableIterable | ArrayLike · Source to convert into an array.
mapFn (optional)Function · Optional transform function for each item.
thisArg (optional)any · Value used as 'this' inside mapFn.

See it in practice

Examples

1

Converting a Set to a unique Array

const uniqueSet = new Set([10, 20, 20, 30]);
const uniqueArray = Array.from(uniqueSet);
Output:
[10, 20, 30]

Converts a Set (which ignores duplicates) into a standard array to allow index-based access.

2

Generating a numeric sequence using the mapping function

const sequence = Array.from({ length: 5 }, function(v, i) {
  return i + 1;
});
Output:
[1, 2, 3, 4, 5]

Uses an object with a length property as an 'array-like' source and populates values using the index in the mapping function.

3

Transforming strings into character arrays

const text = 'hello';
const uppercased = Array.from(text, function(char) {
  return char.toUpperCase();
});
Output:
['H', 'E', 'L', 'L', 'O']

Treats a string as an iterable and applies a transformation to each character during array creation.

Debug faster

Common Errors

1

TypeError

Cause: Passing null or undefined as the first argument.

Fix: Ensure the first argument is an object with a length property or an iterable structure.

Array.from(null); // Throws TypeError
2

LogicError

Cause: Assuming Array.from() performs a deep clone of objects.

Fix: Manually map elements to create deep clones if the source contains objects.

const source = [{a: 1}];
const copy = Array.from(source);
copy[0].a = 2; // source[0].a is also now 2

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE not supportedES6 (2015)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Creates an array from an iterable or array-like object.

arrayLikeOrIterable: Source to convert into an array. mapFn: Optional transform function for each item. thisArg: Value used as 'this' inside mapFn.

TypeError: Ensure the first argument is an object with a length property or an iterable structure. LogicError: Manually map elements to create deep clones if the source contains objects.