What is an Array-Like-Object?

4 min readOct 5, 2018

While learning about JavaScript, you may have come across the term ‘Array-like-Object’ a couple of times. Here are a few examples of array-like-objects:

the arguments object that is available inside all non-arrow functions.
The jQuery object returned by a jQuery selector like ($(#main)).
The objects that are returned from either document.querySelectorAll() or document.getElementsByClassName().

To see an example of the argument object, call a function with these parameters: func(0, 1, 2, 3, 4, 5), return the arguments object from the function (return arguments), and log it to the console. You will see the following:

console:
{
  0: 1
  1: 2
  2: 3
  3: 4
  4: 5
  callee: ƒ functionName()
  length: 5
  Symbol(Symbol.iterator): ƒ values()
  __proto__: Object
}

Definition

An array-like-object is a JavaScript object that meets the following conditions:

At least some of its keys are set to non-negative integers.
It has a length property.

The keys should start at zero and increment sequentially like the indexes of an array, and the length property should be equal to the number of numbered keys.

An Array-Like-Object Builder

To experiment with array-like-objects, I built an array-like-object-builder function:

const arrLikeObjBuilder = (length, func) => {
  const arrLikeObj = {};
  for(let key = 0; key < length; key++) {
    arrLikeObj[key] = func(length, key);
  }
  arrLikeObj.length = length;
  return arrLikeObj;
}

Call this function with the length parameter set to the number of desired elements in the “array” and a function to create the value for each of these elements. The value of the length parameter passed to the arrLikeObjBuilder function and/or the value used to generate the key of each element are passed into the function and can be used (or ignored) to create the value for each key.

I am going to use the following function to call my array-like-object-builder:

const percents = (length, key) => {  // calculate the percent key is of length, rounded to 1 decimal
  let percent = key === 0 ? 0 : Math.round(key / length * 1000) / 10;  return `${key} is ${percent}% of ${length}.`
}

Calling the function, like I do below, writes the following array-like-object to the console:

const arrLikeObj = arrLikeObjBuilder(10, percents);
console.dir(arrLikeObj)console:
{
  0: "0 is 0% of 10."
  1: "1 is 10% of 10."
  2: "2 is 20% of 10."
  3: "3 is 30% of 10."
  4: "4 is 40% of 10."
  5: "5 is 50% of 10."
  6: "6 is 60% of 10."
  7: "7 is 70% of 10."
  8: "8 is 80% of 10."
  9: "9 is 90% of 10."
  length: 10
  __proto__: Object
}

The values with integers for keys can be accessed just like you would with an array:

console.log(arrLikeObj[3]); // logs "3 is 30% of 10."

The length property can also be accessed in the same way as an array:

console.log(arrLikeObj.length); // logs 10

However, arrLikeObj is not an array. Try running an array method against it:

console.log(arrLikeObj.join(‘’))

It doesn’t work. An error is thrown:

console:
Uncaught TypeError: arrLikeObj.join is not a function”.

You can run JavaScript object methods against arrLikeObj:

console.log(arrLikeObj.hasOwnProperty(7)); // logs true

JavaScript does provide a couple of ways to use array methods with array-like-objects.

Array.prototype.[method].call()

One way to call an array method against an array-like-object is to specify the array-like-object as the this of the call() method. To use push() to add a value to the array-like-object, call it like this:

Array.prototype.push.call(arrLikeObj, ’10 is 100% of 10.’);

the arrLikeObject now has the following key/value pair added:

console:
10: "10 is 100% of 10."

Converting an Array Type Object to an Array

Another way to call an array method against an array-like-object is to convert it to an array first. Here are two methods:

Pre ES6:

Array.prototype.slice.call(arrLikeObj);

Post ES6:

Array.from(arrLikeObj);

Either method will produce the following array:

console:
["0 is 0% of 10.", "1 is 10% of 10.", "2 is 20% of 10.", "3 is 30% of 10.", "4 is 40% of 10.", "5 is 50% of 10.", "6 is 60% of 10.", "7 is 70% of 10.", "8 is 80% of 10.", "9 is 90% of 10.", "10 is 100% of 10."]

Once the array-like-object has been converted to an array, all the methods from the array prototype are available.

Conclusion

You should now know what array-like-objects are and how to use them. If you are interested, aditional examples of array-like-objects are below:

jQuery

const $liByClass = $('.list');
console.dir($liByClass);console:
{
  0: li.list
  1: li.list
  2: li.list
  3: li.list
  4: li.list
  length: 5
  prevObject: w.fn.init [document]
  __proto__: Object(0)
}

document.getElementsByClassName()

const liByClass = document.getElementsByClassName('list');
console.dir(liByClass);console:
{
  0: li.list
  1: li.list
  2: li.list
  3: li.list
  4: li.list
  length: 5
  __proto__: HTMLCollection
}

Related Stories: