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;
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