JavaScript: Array-like Objects

What is an array-like object?

When any object look and behave like arrays on the surface but do not share all of their methods is called array-like object. Such objects have length property and members are stored at numeric index. You cannot call array methods directly on array-like objects but you can call them indirectly using Function.prototype.call().

Why JS Array methods support Array-like Objects?

So that you can easily expose some native implementation with length property and numeric index (uint32) which can act like an array.

Can you name few such objects which are native to JavaScript?

Certainly.

1. Arguments Object:

The arguments object made available within the body of function is an array-like object. But can we call the forEach() method on arguments object? No, it does not implement the forEach() method. Similarly, the methods pop(), shift(), and slice cannot be directly called on arguments object, you can do it through Array.prototype.call.

Click here to view the JavaScript MDN Example:

Another Example:

function webAtoms() {
console.log("Hello, I am MVVM framework for JS." + 
         " Do you know my length?" + 
         "It is: " + arguments.length);
console.log("Property Names:" , Object.getOwnPropertyNames(arguments));
console.log("Keys:" , Object.keys(arguments));
}

webAtoms("Web", "Atoms");

Output:

Hello, I am MVVM framework for JS. Do you know my length? It is: 2
Property Names: (4) ["0", "1", "length", "callee"]
                            0: "0"
                            1: "1"
                            2: "length"
                            3: "callee"
                            length: 4
                            __proto__: Array(0)
Keys: (2)["0", "1"]
         0: "0"
         1: "1"
         length: 2
         __proto__: Array(0)

If you look at the example above. The arguments object has non-enumerable property length and hidden key callee (some environments display caller as one of the properties too). How can we confirm that length property is non-enumerable?

We know that the Object.keys() method returns an array of an object's own enumerable property names, iterated in the same order that a normal loop would.

When we try to log the Object.keys(arguments), it yields only "0" and "1" as the keys and doesn't list length as the key.

The key callee contains the instance-of function in non-strict mode. You can always try printing the same inside the function.

console.log(arguments.callee)

If you try to access it in the strict-mode, it results into TypeError.

2. document.getElementsByTagName() and document.getElementsById()
HTML DOM has many array-like objects.

3. JavaScript TypedArrays
JavaScript TypedArrays are array-like objects and provide a mechanism to access the raw binary data.

Hope this article was informative.