Array-like Objects & Array.from

1. Introduction

In JavaScript, several built-in APIs return collections of elements that look and behave like arrays but lack array prototype methods. These collections are known as Array-like Objects. To run array operations (like map or filter) on them, you must first convert them into true arrays.

2. Why It Matters

Common structures like DOM query results (NodeList, HTMLCollection) or function arguments (the legacy arguments object) are array-like. Attempting to call array methods on them directly throws runtime errors.

3. Real-World Analogy

Think of a Set of Toy Building Blocks:

• Array-like Object (Decorative Display Blocks): Blocks glued to a display stand. They look like individual blocks and are organized in order, but you cannot separate them, connect them to other blocks, or rebuild them into a different structure.
• True Array (Standard Blocks Container): Loose building blocks in a box. You can pick them up, combine them, swap their order, and rebuild them however you want (use array methods). Converting array-like objects is like ungluing the display blocks so they can be used as loose building blocks.

4. Defining Array-like Objects

An object is considered array-like if it satisfies two requirements:
1. It has a non-negative integer length property.
2. It has indexed properties (numeric keys starting at 0).

5. Conversion Strategies

You can convert array-like structures to true arrays using three methods:

1. Array.from:

Converts array-like or iterable objects to true arrays. It also accepts an optional map function argument to transform elements during conversion.

2. Spread Operator:

Unpacks elements into an array literal. Note: This requires the object to be iterable (implement the iterable protocol), which custom array-like objects without an iterator function do not support.

6. Practical Example

This script demonstrates converting the legacy arguments object to run array transformations:

7. Common Mistakes

• Using the spread operator on custom array-like objects: The spread operator requires the object to be iterable. Custom array-like objects that lack an iterator function throw a TypeError if spread directly: [...arrayLike]. Use Array.from(arrayLike) instead.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

const config = {
  0: 'light',
  1: 'dark',
  length: 2
};
const copy = [...config]; // throws TypeError: config is not iterable!

const copy = Array.from(config); // ['light', 'dark']

11. Interview Questions

12. Production Considerations

• • Array.from Mapping: When converting and mapping values, prefer using Array.from(arrayLike, mapFn) over Array.from(arrayLike).map(mapFn). The second parameter maps elements during conversion, avoiding the creation of an intermediate array in memory.