Array.prototype..from()

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

Array.from() creates a new shallow-copied Array instance from an array-like or iterable object. It provides a consistent way to convert various data structures into arrays, which is essential since many JavaScript APIs return array-like objects that lack array methods.

Syntax

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

Parameters

Parameter	Type	Default	Description
arrayLike	ArrayLike or Iterable	—	An array-like or iterable object to convert
mapFn	function	undefined	Optional map function to apply to each element
thisArg	any	undefined	Value to use as this when executing mapFn

Examples

Converting a string to an array

const str = "hello";
const chars = Array.from(str);
console.log(chars);
// ['h', 'e', 'l', 'l', 'o']

Using the map function

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

// Equivalent to:
console.log(nums.map(n => n * 2));
// [2, 4, 6]

Converting a NodeList

const paragraphs = document.querySelectorAll('p');
const paraArray = Array.from(paragraphs);
// Now you can use array methods like .map(), .filter()

Creating an array from a Set

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

Creating arrays with a specific length

// Create an array of length 5 filled with zeros
const zeros = Array.from({ length: 5 }, (_, i) => 0);
console.log(zeros);
// [0, 0, 0, 0, 0]

// Create an array of sequential numbers
const range = Array.from({ length: 10 }, (_, i) => i + 1);
console.log(range);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Common Patterns

Generating ranges

const range = (start, end) => 
  Array.from({ length: end - start + 1 }, (_, i) => start + i);

console.log(range(5, 10));
// [5, 6, 7, 8, 9, 10]

Deep cloning arrays

const original = [1, [2, 3], { a: 4 }];
// Shallow copy (same as [...original])
const shallow = Array.from(original);

// For deep clone, combine with structuredClone
const deep = Array.from(original, item => 
  Array.isArray(item) ? Array.from(item) : item
);

Converting arguments to array (pre-ES6 pattern replacement)

function example() {
  // Old way:
  const args = Arrayslice.call(arguments);
  
  // Modern way:
  const args = Array.from(arguments);
}

See Also

• array::isArray
• array::of