You Don’t Know Jack About JavaScript Objects

Objects in JavaScript are incredibly versatile compared to most languages. I came from C# to JavaScript and as I learned about the capabilities of objects I was astounded by all the things they could do. Each time I learned something new about the dynamic nature of JavaScript, and objects, in particular, I learned new tricks I could apply in the right situations.

We’re very used to using objects to hold information about a single/specific item. Like a user. But for collections of things, we use an Array. Simple right?

Well, not so fast, there are times when using an object to hold collections of data is actually the right move. Let’s dig into this a little.

Normally, if I want to store a collection of villains, I use an array like so:

But we can also use an object to contain our list of villains like so:

Now, this may not seem like a good idea at first. Arrays are how we store collections right? If we put them in an object, we can’t do all the usual things we do with arrays. Seems at first to be less effective.

But there are certain things that objects actually do better than arrays when it comes to dealing with collections. In order to understand this, we need to understand how we access and add items to an object collection in this way.

We are used to objects like this:

And a variation of this will likely look familiar.

But did you know that we can do the above with the following syntax?

That’s right. The “array syntax” works on objects too. But in this case, we give the “key” of the item. So when we want the name of our user, we give the “name” key to the “array syntax”. We use this same syntax whether we are getting or setting the item.

And now that we know how to do this, we can add new “items” to our villain collection like so:

And that means that when we want to retrieve an item, we can use a hard-coded string, like above, but we can also use variables. A reasonable retrieval function would look like this:

So if we call that function and pass in “Darth Vader” then we get the correct object back.

Now again, why would we do this instead of using an array? Well, let’s look at the code we need in order to get back an item from our array if we are looking for a specific one by name:

So first off, our code for this kind of retrieval is clunkier. Certainly, there are other options here but the example is still illustrative. Each data structure does different things more effectively.

So here are some guidelines for when to use an object to hold a collection:

1. When relative order between items isn’t important. Objects don’t really have that concept, arrays do.
2. When the numeric position of an item doesn’t matter. Usually, this doesn’t matter, we’re just used to it.
3. When key-based access is advantageous.
4. When a unique key is advantageous. Object keys are unique.
5. When we don’t need to iterate over the collection frequently. This is possible with objects, but it’s pretty unwieldy.
6. When we aren’t constantly removing items. Again this is possible but unwieldy.

Knowing how to use objects as collections is a great tool to have in your belt.

Blow Your Mind

Now if you want to get your mind bent a little, see if you can guess what the following code does:

To see it live, here’s a running example that shows you what’s up. Hint: Arrays are still objects.

Happy coding!

Signup for my newsletter here.

Visit Us: thinkster.io | Facebook: @gothinkster | Twitter: @GoThinkster