Understanding Array-like Objects vs. Normal Arrays

Before diving into array-like objects, let’s briefly review arrays and objects in JavaScript:

Arrays

An array in JavaScript is a container that can hold multiple values of any data type. It is created using square brackets []. Arrays are ordered collections, meaning each value is assigned an index, starting from 0, which determines its position within the array.

Objects

Objects, on the other hand, use a key-value pair. They are collections of properties where each property has a key (string) and a corresponding value, which can be of any data type. Objects are unordered, meaning the order in which properties are defined does not necessarily reflect the order in which they are accessed.

Array-like Objects

Array-like objects resemble arrays in that they contain indexed elements. However, they lack some of the features typically associated with arrays, such as built-in methods like pop, push, and forEach.

Characteristics of Array-like Objects:

• Indexed Elements: Accessed using numerical indices.
• No Array Methods: Lacks built-in array methods like pop, push, and forEach.
• Length Property: Still possesses a length property like arrays but does not automatically update with operations like shrinking.
• Not Constructed by Array Literal: Unlike arrays, array-like objects are not created with array literals [] or the Array constructor. Therefore, they do not inherit properties and methods from Array.prototype.

Example of an Array-like Object:

Consider the following object:

var arrayLike = {0: 'I', 1: 'am', 2: 'array-like', length: 3};

Here, arrayLike resembles an array with indexed elements and a length property. However, it is not a true array.

Distinguishing Array-like Objects from Arrays

To differentiate between array-like objects and normal arrays, you can use the Array.isArray() method introduced in ES6:

Array.isArray(arrayLike); // returns false

Additionally, you can use the instanceof operator:

arrayLike instanceof Object; // returns true
[] instanceof Object; // returns true

But, why do you need to know about it?

JavaScript programming language has many usages of Array-like objects. You may interpret them as an Array and get into possible bugs if you are not aware. We also need to know how to deal with the Array-like object once we recognize one.

argument is an Array-like object

“Arguments” is an Array-like object accessible inside functions that contain the values of the arguments passed to that function.

function checkArgs() {
   console.log(arguments);
}

Let’s call this function with a couple of arguments:

checkArgs(1, 45);

The output in the browser console:

Did you notice the _proto_ value in the output above? Yes, it is an object, not an Array. Like any Array-like object, it has a length property, and the values are indexed.

function checkArgs() {
  console.log(arguments.length);*// logs 2.*
}

Let’s try to use some of the Array methods on the arguments now.

function checkArgs() {
  arguments.pop();
}

When we try to pop an element of the arguments, we will get the following error:

How about trying out forEach?

function  checkArgs() {
  arguments.forEach((elem) => {
    *// Do something here...*
  });
}

No luck! We will get the error:

JavaScript HTMLCollection is an Array-like object

Another example of a JavaScript Array-like object is the DOM HTMLCollection. Methods like the getElementsByTagName() returns an HTMLCollection.

Let’s understand it with an example:

<div id="main">
  <ul>
    <ol type="1">
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ol>
  </ul> 
</div>

Now, let us try to query the DOM using the method, getElementsByTagName(). We will be using the tag li for this example.

document.getElementsByTagName('li');

The output is:

As you see, it is an HTMLCollection and looks like an Array. Let us expand the value of proto and see what the type of HTMLCollection is?

Did you see that? Yeah, it is also an Object. How about we try forEach on it?

document.getElementsByTagName('li').forEach(() => {
 *// Do something here..*
})

No luck! It is because HTMLCollection is an Array-like object and none of the Array methods are available.

How to deal with an Array-like?

In many situations, you may want to treat an Array-like as an Array. There are some advantages to it. If you can convert an Array-like to an Array, you can use all the array methods for computations. But how to do that?

There are three ways we can accomplish it.

Using ES6 Spread operator

We can use the ES6 spread operator([…array-like]) to convert an Array-like to an Array. Let us revisit the example of the arguments.

function checkArgs() {
  // Using spread operator
  [...arguments].forEach((elem) => {
    console.log(elem);
  });
}

We are using the spread operator on arguments and are now allowed to use forEach on it.

Try:

checkArgs(1,45);

Output:

1 45

Use Array.from(array-like)

You can use Array.from(array-like) to concert and Array-like to an Array.

We can do the following for our HTMLCollection example:

const collection = Array.from(document.getElementsByTagName('li'))

If you do console.log(collection), you will find this in the browser console,

Please check the value of proto now. It is an Array.

Using the slice method

In the pre-ES6 era, you can use the slice() method to do the conversion. But wait, isn’t the slice() method is from Array? How are we going to use it on an Array-like? Check this out:

const args = Array.prototype.slice.call(arguments);

A few things are going on there. Let me explain.

• Array.prototype gives us access to all the methods and properties.
• We can’t call the slice() method directly — the this keyword point to Array, not the arguments variable.
• call() is the prototype method of the Function object. It allows us to change what the this variable points to inside a function.

In Summary

Let us summarize what we have learned,

• Array-like is not an Array. They have indexed access to the elements and a length property. All the similarities with an Array end here.
• Array-like is just like a normal JavaScript Object.
• JavaScript language has many Array-like objects that you may end up using.
• There are three ways to convert an Array-like to an Array so that you can deal with it properly. Use the spread operator, Array. from or the slice() method.

A big thank you to Tapas Adhikary, the brilliant author of the insightful article on daily.dev. Your knowledge enhances my understanding and helps me grow as a coder.

Thank you for taking the time to read this article. I hope you found it informative and helpful in understanding the concept of array-like objects in JavaScript. If you have any questions or feedback, please feel free to reach out. Happy coding!