DEV Community

Jacques Williams
Jacques Williams

Posted on

Collections, Collections, Collections, Oh My..

The Beauty Of Collections In Javascript

Collections! You might have heard a thing or two about "collections"
throughout your career. No? You haven't? Darn! that reallllyy sucks. Hmmm... wouldn't it be nice if someone came along and explained what they are? Well today's your lucky day because this just so happens to be my very first dev post! So Let's get started.

The word Collection has a certain connection with every Javascript web developer. If it doesn't, well, that's a shame. Because without collections, would you be able to do virtually anything as it pertains to code? Ehhh.. technically yes but you wouldn't get very far. Collections in Javascript are a combination of two datatypes: Objects and Arrays.

Arrays in Javascript are considered a 0 indexed list. Which is a nice way of saying that they are a way of storing data. Let's say you needed to go shopping in the coding world. That's great and all but how exactly will I write my list down? What if I forget the ice cream again!? Well, consider it included! All you have to do is create an array literal and store your data inside of it like so: ["Food", "water", "ice cream"]. Pretty cool. Now if I wanted to check my list, I could just count the index position that holds a specific value (in this case, the index position of 2 is the culprit that has my ice cream). However life has never been easy for most of us. In reality, the internet is a big place that needs to hold a ton of information. So you can imagine how many lists are being used at a time! Not only that but arrays are virtually infinite in size! We have tools such as loops that help with traversing Array collections. But let's say I wanted to go to the movies and know the details about every showing before I picked one? And doesn't every movie have its own details? How would I store the data then? Surely that will get tedious by using this format.

Alt Text

Enter Objects! The next great "Collection". Objects are formatted a bit differently. Not only that, but they are not an indexed list like their sibling. Instead, objects hold properties. A property consists of 2 things, a key, and a value. So, going back to the movie example, I can use said format of objects to create one movie. The movie has a title property, release date, and a main actor. But remember! We're trying to compare movies right? Well what we could do is store each movie object to a variable and then compare those variables to see which movie I'd prefer. Sure. But that's tedious and not the best idea in terms of optimization. I'm a coder! Aren't we supposed to make life easier? Exactly. This is where the beauty comes in. What if I told you that we could make a list of objects similar to the same way we format arrays? How is that possible you say? Simple! Just store your objects inside the array! Wait wha? Yes. In javascript, you can simply store all your "movies showing" objects inside of an array literal.

Alt Text

Sure you would then have to loop through each object as well to access its values. But there are other methods out there that will help with that process such as underscore's version of the for Each function, or even recursion. This type of versatility within javascript is a prime example of how awesome it is. Essentially, Collections are the bread and butter of Javascript next to functions. Without collections, we wouldn't be able to use things such as prototypical inheritance down the line, which is a way that we pass data from one object to the next. And remember folks, all things in Javascript are objects! (Jk... not really)

Top comments (0)