Explain Array.from and Array-Like Objects in JavaScript

73 / 100

ES6+beginner

Array.from and Array-Like Objects

Converting iterables and array-like objects (things with a length and indices but no array methods) into real arrays, optionally with a mapping function.

Array.from() is the standard way to convert both iterables and array-like objects (things that merely have a .length property and indexed properties, but no Symbol.iterator or Array.prototype methods) into a genuine Array instance. This distinction between 'iterable' and 'array-like' trips people up regularly.

Array.from is like a customs officer who accepts either a passport (a genuine iterable) or, failing that, a numbered ticket stub with a stated headcount (an array-like's length and indices) — either way, everyone gets issued a real visitor badge (a genuine Array) with full building access afterward.

Key Concepts

The classic array-like object is the pre-ES6 arguments object, or a NodeList/HTMLCollection: each has a numeric .length and can be indexed, which looks array-ish, but lacks .map()/.filter()/.reduce() since it isn't actually an Array instance. Array.from(arrayLikeObject) reads its .length and each indexed property, producing a real array.

Array.from() also accepts an optional mapping function argument, applied to every element during conversion, slightly more efficient than calling .map() as a separate pass. This is also how Array.from({ length: 5 }, (_, i) => i) becomes an idiomatic way to generate a numeric range array.

Before Array.from() existed, the common workaround was Array.prototype.slice.call(arrayLikeObject), a functional but far less readable trick. Spread syntax works for genuine iterables but notably does not work on array-like objects that aren't also iterable.