A set of DOM nodes or the arguments object are common array-like structures. They use non-negative integer keys and expose a length property but lack standard array methods such as pop, push, or slice. They are plain objects acting as list facades.

Idenitfying an Array-Like Object

Use length and key constraints to confirm the shape. The upper boundary is 2³²:

function checkArrayLike(candidate) {
    if (typeof candidate === 'object' && isFinite(candidate.length) &&
        candidate.length >= 0 && candidate.length < Math.pow(2, 32)) {
        return true;
    }
    return false;
}

Transforming to a True Array

Using Array.prototype.slice

Array.prototype.slice returns a new array segment. When invoked with call, it operates on an array-like object by iterating numeric indices:

var toArray = (function() {
    return Array.from
        ? Array.from
        : function(obj) {
            return Array.prototype.slice.call(obj);
        };
})();

A manual slice implementation helps explain the process:

Array.prototype.slice = function(begin, finish) {
    var result = [];
    begin = begin || 0;
    finish = finish || this.length;
    for (var idx = begin; idx < finish; idx++) {
        result.push(this[idx]);
    }
    return result;
};

Generic fallback

function toList(source) {
    try {
        return Array.prototype.slice.call(source);
    } catch (ignoreErr) {
        var buffer = [];
        for (var idx = 0, len = source.length; idx < len; idx++) {
            buffer[idx] = source[idx];
        }
        return buffer;
    }
}

ES6 Array.from

Array.from converts many iterables and array-likes:

Array.from('abcdefg');
Array.from(new Set([1, 2, 1, 2]));
Array.from(new Map([[1, 2], [2, 4], [4, 8]]));
Array.from(arguments);
Array.from(document.querySelectorAll('div'));
Array.from({ 1: 2, length: 3 });

Distinguishign Arrays from Array-Like Objects

Four ways to narrow down the type:

• instanceof Array
• target.constructor === Array
• Object.prototype.toString.call(target) === '[object Array]'
• Array.isArray(target)

var items = document.getElementsByTagName('li');
var normal = [];

console.log(normal instanceof Array);                // true
console.log(items instanceof Array);                 // false

console.log(normal.constructor === Array);           // true
console.log(items.constructor === Array);            // false

console.log(Object.prototype.toString.call(normal) === '[object Array]'); // true
console.log(Object.prototype.toString.call(items) === '[object Array]');  // false

console.log(Array.isArray(normal));                  // true
console.log(Array.isArray(items));                   // false

Exploiting apply for Array→Argument Conversion

Function.prototype.apply expands an array into a list of arguments, useful when a function does not accept an array directly.

Max value

var values = [1, 2, 3, 4, 5];
var largest = Math.max.apply(null, values);

Merging arrays with push

var base = ['alpha', 'beta', 'gamma'];
var extra = ['delta', 'epsilon', 'zeta'];
Array.prototype.push.apply(base, extra);

Before the call base gains the trailing elements, achieving an in-place merge.