Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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