JavaScript Array.from() Guide

JavaScript developers often need to convert data into arrays. The Array.from() method is a powerful tool for this task. It creates a new, shallow-copied array from an array-like or iterable object.

This guide explains everything about Array.from(). You will learn its syntax, use cases, and practical examples. By the end, you will use it confidently in your projects.

What is Array.from()?

Array.from() is a static method on the Array constructor. It transforms array-like objects (like arguments or DOM NodeLists) and iterables (like Sets or Maps) into real arrays.

It accepts three arguments: the object to convert, an optional map function, and an optional this value. This makes it more flexible than other conversion methods.

Syntax and Parameters

The basic syntax is simple. You call Array.from() on the Array object, not on an array instance.

 
// Basic syntax
Array.from(arrayLike, mapFunction, thisArg);

// Example with all parameters
const doubled = Array.from([1, 2, 3], x => x * 2);
console.log(doubled); // Output: [2, 4, 6]

The first parameter is required. The second and third are optional. The map function runs on each element of the new array.

Converting Array-Like Objects

Array-like objects have a length property and indexed elements. The arguments object inside a function is a classic example.

Before ES6, developers used Array.prototype.slice.call(). Now Array.from() is cleaner and more intuitive.

 
function listArguments() {
  // Convert arguments to a real array
  const args = Array.from(arguments);
  return args.join(', ');
}

console.log(listArguments(1, 'two', 3)); // Output: "1, two, 3"

DOM queries also return NodeLists. These are array-like but lack array methods. Use Array.from() to apply map() or filter().

 
// Example with NodeList (conceptual)
const divs = document.querySelectorAll('div');
const divTexts = Array.from(divs, div => div.textContent);
console.log(divTexts); // Output: array of text contents

Working with Iterables

Iterables are objects with a Symbol.iterator method. Strings, Sets, Maps, and generators are iterables. Array.from() converts them easily.

This is especially useful for Sets. A Set stores unique values but lacks array methods like sort() or map().

 
const mySet = new Set([1, 2, 3, 3, 4]);
const setArray = Array.from(mySet);
console.log(setArray); // Output: [1, 2, 3, 4]

// Map function on Set
const squared = Array.from(mySet, x => x * x);
console.log(squared); // Output: [1, 4, 9, 16]

Strings are iterable too. You can split a string into an array of characters easily.

 
const greeting = "Hello";
const chars = Array.from(greeting);
console.log(chars); // Output: ['H', 'e', 'l', 'l', 'o']

This works with emojis correctly, unlike the old split('') method. It respects Unicode code points.

Using the Map Function

The map function is a major advantage. It lets you transform elements during conversion. This saves an extra step.

It works exactly like the Array.prototype.map() method. You can access the element, index, and the temporary array.

 
const numbers = [1, 2, 3];
const multiplied = Array.from(numbers, (num, index) => num * index);
console.log(multiplied); // Output: [0, 2, 6]

This is efficient and clean. You avoid creating an intermediate array.

Creating Arrays from Length

You can generate arrays with a specific length and fill them dynamically. Pass an object with a length property.

This is perfect for creating sequences or initializing arrays with values.

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

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

The first argument is a plain object. The map function uses the index to generate values.

Array.from() vs. Spread Operator

The spread operator (...) also converts iterables to arrays. However, it does not work on array-like objects.

For example, you cannot spread the arguments object directly. Array.from() handles both cases.

 
// Spread works with iterables
const spreadArray = [...new Set([1, 2, 3])];
console.log(spreadArray); // Output: [1, 2, 3]

// Spread fails for array-like objects
function test() {
  // This will throw an error
  // const arr = [...arguments]; 
}

Also, spread does not support a map function. You need a separate map() call. Array.from() is more versatile.

Practical Use Cases

One common use case is deduplication. Combine Array.from() with a Set to remove duplicates.

 
const duplicates = [1, 2, 2, 3, 3, 3];
const unique = Array.from(new Set(duplicates));
console.log(unique); // Output: [1, 2, 3]

Another use case is working with function arguments. Convert arguments to an array to use array methods.

You can also use it to flatten a NodeList for easier DOM manipulation. This is common in front-end development.

Performance and Pitfalls

Array.from() is generally fast. But avoid using it on very large iterables unnecessarily. The map function adds a slight overhead.

Be careful with sparse arrays. Array.from() treats holes as undefined, unlike map() which skips them.

 
// Sparse array
const sparse = [1, , 3];
const fromSparse = Array.from(sparse);
console.log(fromSparse); // Output: [1, undefined, 3]

Also, remember that Array.from() creates a shallow copy. Nested objects are still referenced.

Related Array Methods

Understanding Array.from() helps with other array methods. For instance, you can combine it with Array.reduce() for complex transformations.

If you are grouping data, check out this guide on Group JavaScript Array Items by Key. It uses similar concepts.

For more basics, see our JavaScript Array Methods Guide. It covers other essential methods.

Shuffling arrays is another common task. Learn how to Shuffle a JavaScript Array Randomly to complement your skills.

Conclusion

Array.from() is an essential method for modern JavaScript. It simplifies converting array-like objects and iterables into real arrays.

Its built-in map function makes transformations easy and readable. You can create ranges, deduplicate arrays, and handle DOM elements efficiently.

Remember the differences from the spread operator. Use Array.from() when you need a map function or work with array-like objects.

Practice with the examples above. You will find many uses for this method in your daily coding tasks.