What are Array-like objects in JavaScript?

Have you ever tried to use an array method like forEach() on a variable that you thought was an array but apparently, is not? Then you get this ugly error saying that the method you’re trying to use is not defined. Well, that is because oftentimes you might be working with an array-like object instead of an array. The concept of array-like objects can be especially daunting for beginners who are trying to learn JavaScript. In this article, we will look at what array-like objects are, and how they work, and we will also discuss how you can convert array-like objects to native JavaScript arrays.

What are Array-like objects?

Before we get into more technical stuff, let us briefly discuss what they are. So an array-like object is a collection of values that can be accessed like an array, but which does not have all the features of an array. Array-like objects do not have a length property, and they cannot be used with the forEach() or map() methods. However, they can be used with the for-in loop and the indexOf() and lastIndexOf() methods.

One example of an array-like object is the arguments object, which is available inside functions. The arguments object contains all the arguments that were passed to the function. Another example is the NodeList object, which represents a collection of nodes from a document.

Enough boring jargon, let us look at a very common example that usually confuses beginners.

// elements is an array-like, not an array!
const elements = document.getElementsByTagName('a');

// works
console.log(elements.length);

// throws error TypeError: elements.forEach is not a function
elements.forEach((el) => {
	console.log(el);
})
Code language: JavaScript (javascript)

In the example above, we are using the getElementsByTagName() method to get all the elements in the document with a specific tag name (In this case the “a” tag). Now a lot of people assume this method would return an array of all the elements, but that is not true. The method in this case returns an HTMLCollection object which is an array-like object. We can verify this by simply printing the elements variable,

There are many similar array-like objects in JavaScript like NodeList, Arguments, etc. A string is a primitive data type in JavaScript but they also behave like an array-like object.

Now we know what array-like objects are, but how do we work with them? Let us tackle it next!

Working with array-like objects

As we have discussed, an array-like object is a data structure that has many of the properties of an array but is not an array itself. In fact, array-like objects are actually treated as normal objects in JavaScript. Array-like objects do have some of the properties and methods you might expect, the length property for example. But it misses a lot of the useful methods that arrays offer, forEach() and map() methods just to name a few. This can cause a lot of pain when working with them. Let us look at how we can fix that.

Converting to an array

Thankfully, we can easily convert array-like objects to arrays and use all the sweet functions that arrays offer. There are 2 easy ways of doing this:

We can simply use the Array.from() method and pass the array-like object as the argument. This will return an array which we can then store in a variable of your choice. After that, you can do everything you could do with arrays since you are essentially working with an array now.

Alternatively, if you want your code to look extra fancy, you can use the ES6 Spread operator to convert array-like objects to arrays. The syntax here definitely looks cleaner than calling another method.

Here is an example using both the methods listed above,

const elements = document.getElementsByTagName('a');

// using Array.from
const arr1 = Array.from(elements);
//using spread operator
const arr2 = [...elements];

console.log(arr1);  // outputs array of elements
console.log(arr2);  // outputs array of elements
Code language: JavaScript (javascript)

Using the for-in loop

If all that you want to do is looping through an array-like object, then you can consider using a for-in loop. The for-in loops are much like normal for-loops but are meant for objects. Although, you should be careful when using the for-in loop as it may also iterate through some of the methods along with the elements you intended to loop through. Here is a simple example of using the for-in loop with array-like objects,

const elements = document.getElementsByTagName('a');

// for-in loop
for (el in elements) {
	console.log(elements[el]);
}
Code language: JavaScript (javascript)

I would suggest you just consider converting the array-like objects to arrays to skip the extra hassle.

Conclusion

Array-like objects can be useful when you need to work with a collection of values, but don’t need the full power of an array. As a beginner, array-like objects may confuse you since they behave like arrays but miss some crucial methods and properties that are there in arrays. This can lead to very unexpected errors which are very difficult to debug. In this article, we looked at what array-like objects are, and how we can work with them effectively by converting them to arrays and other techniques. I hope this article has helped you clear all your doubts, and you are now able to work with them without any hassle!

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!