Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Ryan Smith
Ryan Smith
3,757 Points

Difference between collections and arrays (is there one?)

This may be a very stupid question, but having just started working through some of the document.getElementById lessons and working with 'collections', I'm wondering what's the difference between collections and arrays? Are there any? Is collection just another name for arrays? They seem to be the same thing and work the same way. I tried looking through more info on collections on the MDN and was reading about 'NodeList' but was having trouble following it.

Thanks!

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Ryan Smith ! I received your request for assistance. They are very array-like structures. But instead of an array that contains things like integers or strings, they contain nodes from the DOM. I don't know if you've gotten to object-oriented programming yet, but this might make more sense when you do. The things being stored in these HTMLCollections have styles associated with them, properties, attributes, you name it and it goes way beyond just a simple string or integer.

Now, having said that, as far as accessing them using subscripting like let allDivs = document.getElementsByTagName("div"); they work very much like an array. To get the second div recorded in the allDivs variable you could do let secondDiv = allDivs[1]. But unlike true arrays they are missing functions like .push(), .pop() etc. They do, however contain the .length property just like a true array.

But luckily, they are easily converted to a true array should you need the other methods like .push(), .pop() etc. Check out the Array.from method.

Long story short: they are much like a watered-down version of an Array that stores objects from the DOM.

Hope this helps! :sparkles:

edited for additional information

In this answer, I am talking specifically about HTMLcollections but please note that there are other data structures that are generically termed as "collections" including (but not limited to), arrays, objects, sets etc.

Ryan Smith
Ryan Smith
3,757 Points

Thanks so much for your answer, I really appreciate it! This does clear up some of my confusion, and I'm sure it will indeed make more sense as I continue learning. :D