Array-like objects are frequently encountered in JavaScript development. Technically known as pseudo-arrays, they possess specific characteristics that mimic arrays without fully behaving like them.

The core definition of a pseudo-array includes:

1. An object structure.
2. A numeric length property.
3. Numeric keys that allow iteration.

However, these objects lack native array methods such as .push(), .pop(), or .forEach().

Common Instances

Beyond standard arrays, common examples include the arguments object available within non-arrow functions and the collection returned by DOM methods like document.querySelectorAll. Attempting to call .push(1) on an arguments object will result in a runtime error.

Legacy Conversion Strategies (ES5)

Before modern specifications were adopted, developers utilized several patterns to transform these structures into genuine arrays.

Iteration Loop

A straightforward approach involves manually iterating through the length property and pushing elements into a new array container.

function convertCollection(collection) {
  const temp = [];
  for (let i = 0; i < collection.length; i++) {
    temp.push(collection[i]);
  }
  return temp;
}

function executeTest(...inputs) {
  const list = convertCollection(arguments);
  console.log(list);
}

executeTest('apple', 'banana');
// Output: [ "apple", "banana" ]

While effective, this method introduces additional boilerplate code.

Borrowed Slice Method

Developers often borrow the slice method from Array.prototype using call to bypass type restrictions.

function quickConvert(args) {
  return Array.prototype.slice.call(args);
}

This is concise, though the intent might be less immediately obvious to other maintainers compared to explicit iteration.

Modern Conversion (ES6+)

The ECMAScript 2015 specification introduced Array.from() to solve this problem cleanly.

function processItems(...values) {
  const nativeArr = Array.from(values);
  console.log(nativeArr);
}

processItems(1, 2, 3);
// Output: [ 1, 2, 3 ]

The primary utility of Array.from() is converting array-likes or iterables into standard arrays. It also offers extensibility via two optional parameters.

Mapping and Context

The second parameter accepts a mapping function executed against every element, functioning similarly to .map(). The third argument allows defining the this context for that mapping function.

const config = {
  multiplier: 2,
  compute(value) {
    return value * this.multiplier;
  }
};

function runCalculation(a, b) {
  // Uses 'config' as the context for 'compute'
  return Array.from(arguments, config.compute, config);
}

const results = runCalculation(5, 10);
console.log(results); // [ 10, 20 ]

Initialization and Strings

Because strings are iterable, Array.from() can split them into character arrays.

const text = 'js';
const charList = Array.from(text);
console.log(charList); // [ "j", "s" ]

It also spuports initialization based on length. If provided an object with a length property but no indexable keys, it creates an initialized array filled with values determined by the mapping function.

const padded = Array.from({ length: 4 }, () => 0);
console.log(padded); // [ 0, 0, 0, 0 ]

Note that if a valid array instance is passed to Array.from(), it returns a shallow copy of that array.