JavaScript - Difference between Array and Array-like object

The famous HTMLCollection (documentation) and the arguments (documentation) are array-like object that automatically created.

Some quick array-like (e.g HTMLCollection) differences between real array examples:

var realArray = ['value1', 'value2'];
var arrayLike = document.forms; 

Similarities:

The length getter is the same:

arrayLike.length; // returns 2;
realArray.length; // returns 2; //there are 2 forms in the DOM.

The indexed getter is the same:

arrayLike[0]; // returns an element.
realArray[0]; // returns an element. ('value')

They are both objects:

typeof arrayLike; // returns "object"
typeof realArray; // returns "object"

Differences:

In array-like the join(), concat(), includes() etc, methods are not a functions:

arrayLike.join(", "); // returns Uncaught TypeError: arrayLike.join is not a function (also relevant to `concat()`, `includes()` etc.)
realArray.join(", "); // returns "value1, value2"

The array like is not really an array:

Array.isArray(arrayLike); //returns "false"
Array.isArray(realArray); //returns "true"

In array like you can't set the length property:

arrayLike.length = 1;
arrayLike.length; //return 2; //there are 2 forms in the DOM.
realArray.length = 1;
realArray.length; //return 1;

To begin with, an array is a specialised object. Specialised in that:

• There is a special literal syntax [ … ]
• There is a length property which is automatically updated
• The array prototype includes the functions that you normally expect from an array

The other obvious feature is that all elements have a numeric index.

From JavaScript’s point of view any object which has a length property is close enough to be regarded as an array-like object:

var arrayLikeObject = {
    length: 3,
    name: 'thing',
    '1': 'hello'
};
console.log(arrayLikeObject);

The length property doesn’t have to be correct. Even in a normal array, it’s possible to force the length to be other than the number of actual elements. The missing elements all return undefined.

You can convert from an array-like object to a real array using Array.from(). This function will take various values, but the simplest is something like:

var arrayLikeObject = {
    length: 3,
    name: 'thing',
    '1': 'hello'
};
var array = Array.from(arrayLikeObject);
console.log(array);

From here on, the array has all the usual properties and methods. In the above example, the property [1] is copied into the new array, but the element [name] is not, since it doesn’t belong in a real array.

The Array.from() function also accepts a mapping function as a second parameter. This allows you make any changes you need in transit:

var arrayLikeObject = {
    length: 3,
    name: 'thing',
    '1': 'hello'
};
var array = Array.from(arrayLikeObject,
    (element,index) => element?element.toUpperCase():`Item ${index}`
);
console.log(array);

There is also a performance difference. In this video Mathias Bynens recommends to use array over array-like-object because V8 is optimized for common arrays.

I think, in ES6, something is Array-like if it is iterable (has a [Symbol.iterator] property).