HTMLCollection forEach loop – Convert object to array: JavaScript

Ever had an array-like object that you want to iterate over? These annoying collections, which look like arrays, don’t have access to useful array methods like the ‘forEach‘ loop. They include objects with a length property, such as HTMLCollection, NodeList, argument list and even strings. Today I’m going to show you how to make these objects a little bit more useful, by converting them into JavaScript arrays.

Let’s start with a simple scenario where we have 5 divs. Each div has the same class and we query for a HTMLCollection using ‘getElementsByClassName‘.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<script>
    const boxes = document.getElementsByClassName('box');
</script>

Here are 4 ways to convert the returned HTMLCollection to an array.

Convert to array using a spread operator

A spread operator will allow us to expand the values of our array-like object and push them into a new array. This works because the HTMLCollection is iterable. The code looks something like this:

const boxArray = [...document.getElementsByClassName('box')];

Convert to array using Array.from()

Array.from does what it sounds like; it converts array-like objects to actual arrays. This is my preferred method of converting to array because it is semantically very easy to read at a glance. You should note that this method isn’t actually supported by Internet Explorer, but who cares about Internet Explorer now anyway…

const boxes = Array.from(document.getElementsByClassName('box'));

Convert to array using Array.prototype.slice.call()

More widely supported, we can use the Array.prototype.slice.call() (or [].slice.call for short) methods for converting. Basically we are using the array method ‘slice‘ (which returns a copy of an array) on an array-like object with a ‘call’ method, and then saving the copy into a new array object.

var boxes = Array.prototype.slice.call(document.getElementsByClassName('box'));

var boxes = [].slice.call(document.getElementsByClassName('box'));

Convert to array using an iterator loop

Last, but not least, you could solve this problem the good old fashioned way; with a simple iterator loop. From here we could loop our array-like object ‘as-is’ or push each iteration to a new array (in this case ‘boxArray’) for a future use.

const boxes = document.getElementsByClassName('box');
const boxArray = [];

for (let i = 0; i < boxes.length; i++) {
    console.log(boxes[i]);

    // At this point we could also push the elements to an array
    boxArray.push(boxes[i]);
}