Looping Through Objects in JavaScript

Objects are ubiquitous in JavaScript, so we need to be as fluent as possible in working with them. In particular, what are the various techniques at our disposal for looping through objects? This post will take a look at some of the most common approaches, as well as how we can leverage the powerful array looping methods for use with objects. We’ll discuss some of the pros and cons of each technique, as well as when it might be most beneficial to use each.

Do object looping mechanisms always iterate over the object’s properties in the exact same order?

Prior to ES6, there was no guaranteed order to iteration over an object’s properties. The result was that different browsers and engines could iterate using their own methodologies, and there was no guarantee of uniformity. Since ES6, there are, in fact, clear rules for ordering object properties, and predicting the order is getting more reliable across browsers and JS engines. In any case, this normally shouldn’t matter so much, since order is inherently not really important in objects — if it was, you probably would’ve used a data structure that incorporates some sort of order/sequence, like an array.

Here’s the simple example object we will be working with:

The first way we will look at is a looping mechanism that’s built into the language specifically for dealing with objects.

As with each technique we introduce, we’ll take a look at how to access the key/property and the value, which are obviously the main items we want to access within each iteration. So here’s how the for…in loop works:

Remember that order is not guaranteed, so the actual output order could be different.

This technique makes it really easy to access each key, and one extra step to access each value. Note that we don’t even have to create a variable to access the value; we can just write object[key] every time if we wish.

To get a little technical for a minute — one unique feature of the for…in loop is that it will iterate over inherited properties, so long as they are enumerable. In order to understand this last line, we need to briefly explain 2 concepts: inheritance in JavaScript, and what it means for a property to be enumerable.

Without going into great detail, JavaScript uses a mechanism known as prototypal inheritance. This allows an object to use a property that does not exist within its own definition. Every object can inherit from a different object. How to set this up is not within the scope of this article, but suffice it to say that the for…in loop will include properties from “parent objects.”

However, there is a caveat; for…in only includes object properties that are enumerable. Every object property can be set to be “enumerable” or not enumerable. This setting will determine whether or not a property will be included when the object is iterated over, e.g. with a for…in loop! Once again, how to accomplish this is beyond the focus of this article, but know that it’s not too difficult to set up. Anyway, this explains why for…in doesn’t include tons of extra inherited properties, because the built-in , default inherited properties in JS are non-enumerable.

There are ways to filter out unwanted inherited properties and only use non-inherited ones, a.k.a. “own properties”, but in this situation it might just be easier to use a different looping technique altogether, such as the ones we will take a look at next.

There are a number of highly useful static methods which allow us to basically turn an object into an array. Each method creates an array from an object, but the output in each one is different. Let’s take a look at how these work:

Object.keys(obj) will create an array of just the keys/properties of an object. Here it is in action using our example object:

Object.keys is one of the most useful and commonly-used methods. By creating an array of keys, we can easily make use of any array method we choose, and it is easy to access each key and value within each iteration, like so:

Object.values(obj) will create an array, you guessed it, of the object’s values:

This can be very useful if all you need is the object’s values. You can easily iterate over the values using any array method. For example, you could add up the values if they are number values, filter them, or anything else you’d like to do with them.

Finally, Object.entries(obj) will create an array that contains both the object’s keys and values in a nested array:

This can be useful, as it gives us access to both keys and values in one data structure. Effectively, it is an array representation of an object.

However, in many cases, it is sufficient to use Object.keys, and just access the values by obj[key], as we did above.

Besides using array methods, we can also use the for…of loop to iterate through the arrays created by these 3 static methods:

Don’t get confused between for…in and for…of. For…in is an older looping mechanism that is specifically meant for objects. For…of is a newer, ES6 looping mechanisms to simplify array iteration.

We can do the same as above without initially creating a keys variable, in one line:

These 3 static methods only iterate over own properties, not inherited ones. That is distinct from the for…in loop that we looked at first. It’s worth understanding this point, because it can come up now and again. However, often inherited properties are non-enumerable, and therefore won’t show up anyway. In addition, it is easy enough to filter out unwanted inherited properties from “polluting” your iteration if you don’t want them. So the main point is that if you do want to include inherited properties, use the for…in loop and not these static methods of Object.keys, Object.values, or Object.entries.

Hopefully you will find some or all of these techniques useful. Knowing the various options available helps us quickly decide on which one makes sense, but often multiple ways would work just fine and it comes down to personal preference. As we’ve seen, there are some slight nuances between the techniques, which are important to be aware of.

So, if you’re not familiar with any of the concepts we’ve discussed, there’s no better way than opening up a code editor and trying some out! With a little practice, looping over objects will become second nature.

Till next time…

Related posts:

Everyone wants a quick and easy way to get their guest’s post published on a site. Unfortunately, there’s no such thing. We recently surveyed a whole bunch of seo professionals asking them what was…

This course will introduce students to a range of works of print and broadcast Journalism to allow them to understand the scope, purpose, and influence of telling true stories in the journalistic…

A beautiful and tender ad was created to challenge ageism in advertising. This is a beautifully shot coming-of-age piece and one of the few ads to actually show urine on-screen via loss of bladder…