Array.from & Array.of0%
Deep Copy vs Shallow Copy

Array.from & Array.of

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Array.from & Array.of in Modern JavaScript

ES6 introduced static factory methods on the Array constructor—Array.from() and Array.of()—to resolve long-standing quirks with the legacy Array() constructor and simplify conversion of array-like and iterable objects.

1. The Pitfall of the Array Constructor

The legacy new Array() constructor behaves inconsistently depending on the number and type of arguments:

JavaScript
new Array(1, 2, 3); // [1, 2, 3] (Creates 3-element array)
new Array(5); // [ <5 empty slots> ] (Creates sparse array with length 5, NO elements!)

This unpredictability caused subtle bugs. ES6 introduced Array.of() and Array.from() as standard solutions.

2. Array.of(): Predictable Array Instantiation

Array.of() creates a new Array instance with a variable number of arguments, regardless of number or type:

JavaScript
Array.of(5); // [5] - Array containing number 5!
Array.of(1, 2, 3, 4); // [1, 2, 3, 4]
Array.of(undefined); // [undefined]

3. Array.from(): Converting Iterables and Array-Likes

Array.from() creates a new, shallow-copied Array instance from an iterable object (Map, Set, String) or an array-like object (an object with a .length property and indexed elements, such as DOM NodeLists or arguments).

Output
Array-Like or Iterable Array.from(target, mapFn)
┌─────────────────────────┐ │
│ NodeList, Set, Map, │ ───────────────────────┼───► Real JavaScript Array
│ or { length: 5 } │ │ with .map, .filter, etc.
└─────────────────────────┘

Converting a Set to an Array (Removing Duplicates)

JavaScript
const tags = ['javascript', 'react', 'javascript', 'css', 'react'];
const uniqueTags = Array.from(new Set(tags));
console.log(uniqueTags); // ['javascript', 'react', 'css']

Converting DOM NodeLists

JavaScript
const buttonNodes = document.querySelectorAll('button');
const buttons = Array.from(buttonNodes);
// Now you can safely use .filter() or .slice()

4. Built-in Mapping Function

Array.from() accepts a second optional parameter: a mapFn that executes on every element during conversion. This avoids allocating an intermediate array.

JavaScript
// Syntax: Array.from(arrayLike, (element, index) => transformedElement)
 
const prices = Array.from(
document.querySelectorAll('.price-tag'),
el => parseFloat(el.textContent.replace('$', ''))
);

Generating Number Ranges (Range Generator)

JavaScript
// Create an array containing numbers 1 through 10
const range1To10 = Array.from({ length: 10 }, (_, index) => index + 1);
console.log(range1To10); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
// Generate alphabet letters A to Z
const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
console.log(alphabet); // ['A', 'B', 'C', ..., 'Z']
Interactive Quiz

Practice Quiz

Question 1
What is the result of Array.of(4)?
Question 2
What is the primary difference between Array(3) and Array.of(3)?
Question 3
What is the output of Array.from('CODE')?
Question 4
How can you generate an array of numbers [0, 1, 2, 3, 4] using Array.from()?
Question 5
Why is Array.from(nodeList, mapFn) more efficient than Array.from(nodeList).map(mapFn)?
Next Lesson

Deep Copy vs Shallow Copy

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
find, some, everyDeep Copy vs Shallow Copy

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext