Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

How to Iterate Over Object Properties in JavaScript

Read Time: 4 mins

In this article, we'll go through the various ways to iterate over the properties of an object in JavaScript.

What Is an Object in JavaScript?

An object is a special data collection in a programming language such as JavaScript—it's used to represent real-world objects or to store program state or organize program data. An object could have one or more properties to describe it, and may also have methods for performing common tasks.

For example, a bank account can be thought of as an object, with properties like bank balance, account type, and account currency, all describing the bank account.

Tasks like subtracting from or adding money to the account, closing the account, and sending money from the account can all be represented as methods. 

The most popular way to represent an object in JavaScript is with double curly brackets (aka object literals). On the object, we can define properties, methods, or both.

Each object property consists of the property accessor (e.g. currency), and the property value (e.g. "USD"). Methods are functions which perform specific tasks within the object. 

Inside the subtract method which subtracts the new expense from the bank balance, we accessed the balance property using this. We can access any property or method from within the object using the this reference.

We can also iterate over the properties of the object to process them one by one. In simple terms, iteration is the process of repeating certain algorithmic steps until a particular condition is met. This is often called a loop. In this case, iteration over a data set means to run some code for each item in the set.

Let's take a look at some of the modern ways to iterate over an object's properties in JavaScript.

Iterate Over Property Keys With Object.keys()

Object.keys() returns an array containing the keys of all properties on any given object.

So we can combine Object.keys() with a for loop to iterate over all the properties of an object by iterating over its keys like so:

Because our iterator gives us the keys to the object properties, we are able to access the values directly from the object user using the property accessor syntax: user[key].

Directly Iterate Over Property Values With Object.values()

Object.values() works in a very similar way to Object.key(). The main difference between the two is that while Object.keys() returns just the property keys, Object.values() returns the values instead.

Consider the following code which returns only the values for all properties:

Using a for loop, iterate over the properties of an object with Object.values().

Because the property keys are going to be required in many cases, this is probably not the method you'd want to use when iterating over an object.

Iterate Over Object Properties With Object.entries()

Object.entries() provides a cleaner way to access both the keys and values of any given object within a JavaScript loop.

The method returns a multidimensional array (aka an array of arrays) for any given object. Each child array contains both the key and value for a particular property.

Now we can use Object.entries() with a for loop to easily retrieve both key and value for each property like so:

Here, for every entry, we find the entry value at index 1 and the key at index 0. 

To further simplify the code, we can use array destructuring to retrieve the key and value for each property into separate variables:

Compared to the other methods, this approach is much cleaner and more readable. 

Conclusion

Object.entries() is the recommended method for iterating over an object's properties in JavaScript. 

Since the method returns a multidimensional array, we can greatly simplify our code by using the array destructuring syntax to retrieve each property into a separate variable. This helps in keeping everything flexible.

Object.values() could be used in cases where you only need the values and not the keys.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.