On Collections

As you know, datatypes play an enormous role in our lives as programmers. A lot of what we do is create, collect, transform, and manipulate data before packaging it up and sending it off.

While I was building out my single page application- my first app in javascript- I encountered a datatype that I hadn't played around with too much: the HTML Collection.

I came across this object by running:

const deleteButton = document.GetElementsByClassName("delete-button")

My goal was to add an event listener on to each of these buttons, so that I could delete the recipes I was dynamically displaying with my app.

The output of the .GetElementsByClassName() is an HTML collection. Now, an HTML collection is a live object- which means that the output of that same function with the same argument passed in will be different collections, depending on how many nodes are on your DOM with the stated class name.

Okay, I thought to myself- this sounds like what I need... Because I only want to add this event listener to the buttons that have rendered- and that number will change based on the number of recipes displaying at the same time!

Well, I was given an error message telling me that I am unable to iterate over these HTML collections when I tried to run my code:

deleteButton.forEach( d => d.addEventListener("click", deleteHandler)

Why is this happening, I thought- I popped a debugger in my code and played around with the console, hypothesizing and experimenting with my suspicions. Unable to come up with a solution, I turned to MDN's Javascript documentation.

Quickly, I was able to come across the Array.from() method!
According to MDN, this "static method creates a new, shallow-copied Array instance from an array-like or iterable object."

This sounded like exactly what I needed. Another quick search for HTML Collection confirmed my suspicion- An HTML Collection is actually classified as an array-like object!

So what is an array-like object? Well, it is like a primitive array. It looks similar to, and shares some behavior traits with the classic Array- but that is the end of how they are similar. Array-like objects don't have access to the array methods that normal arrays have access to- methods including .forEach() and .map()!

So using my newfound knowledge I set off to experiment with my new friend, the Array.from() method.

const deleteButton = document.GetElementsByClassName("delete-button")

Array.from(deleteButton, (element) => {element.addEventListener("click", deleteHandler()} 
)

In the above code, I declare a variable named deleteButton, and assign the output of my GetElementsByClassName("delete-button")- which is an HTML Collection of all of the nodes with that class on my DOM.

Then, Array.from(deleteButton... essentially makes a copy of that array-like object, except it has the behavior of a traditional array.

Now, passing an arrow function to the Array.from(), I can call the .addEventListener() function onto each of those array elements, thus giving them the desired behavior- dynamically!

This process of rising to a challenge, and coming out with a greater understanding of programming is both fun and rewarding! I really have enjoyed putting the critical thinking skills I have developed to work.