JavaScript - Difference between Array and Array-like object

Question

I have been coming across the term \"Array-Like Object\" a lot in JavaScript. What is it? What\'s the difference between it and a normal array? What\'s the difference betwee

Answer 1

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.

Answer 2

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;

Answer 3

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

Answer 4

What is it?

An Object which has a length property of a non-negative Integer, and usually some indexed properties. For example

var ao1 = {length: 0},                     // like []
    ao2 = {0: 'foo', 5: 'bar', length: 6}; // like ["foo", undefined × 4, "bar"]

You can convert Array-like Objects to their Array counterparts using Array.prototype.slice

var arr = Array.prototype.slice.call(ao1); // []

Whats the difference between it and a normal array?

It's not constructed by Array or with an Array literal [], and so (usually) won't inherit from Array.prototype. The length property will not usually automatically update either.

ao1 instanceof Array; // false
ao1[0] = 'foo';
ao1.length; // 0, did not update automatically

Whats the difference between an array-like object and a normal object?

There is no difference. Even normal Arrays are Objects in JavaScript

ao1 instanceof Object; // true
[] instanceof Object; // true