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 between an array-like object and a normal object ?

Answer 1

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 

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;