Sometimes you may need to iterate through an object in JavaScript to retrieve multiple key-value pairs. In this article, we will look at four different ways to looping over object properties in JavaScript.

Before ES6, the only way to loop through an object was the for...in loop. The Object.keys() method was introduced in ES6 to make it easier to iterate over objects. Later in ES8, two new methods were added, Object.entries() and Object.values(). The newest methods convert the object into an array and then use array looping methods to iterate over that array.

Let us begin with the first method!

for...in Loop

The simplest and straightforward way to iterate over object properties is by using the for...in statement. This method works in all modern and old browsers including Internet Explorer 6 and higher.

Here is an example that uses the for...in loop to iterate over an object:

const user = {
    name: 'John Doe',
    email: 'john.doe@example.com',
    age: 25,
    dob: '08/02/1989',
    active: true
};

// iterate over the user object
for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}

// name: John Doe
// email: john.doe@example.com
// age: 25
// dob: 08/02/1989
// active: true

The problem with for...in loop is that it iterates through the properties in the prototype chain as well. Since the objects in JavaScript can inherit properties from their prototypes, the fo...in statement will loop through those properties as well.

To avoid iterating over prototype properties while looping an object, you need to explicitly check if the property belongs to the object by using the hasOwnProperty() method:

for (const key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(`${key}: ${user[key]}`);
    }
}

Fortunately, we no longer need to rely on for...in and hasOwnProperty() method to loop through an object. There are better ways available.

Object.keys() Method

The Object.keys() method was introduced in ES6. It takes the object that you want to iterate over as an argument and returns an array containing all properties names (or keys).

You can then use any of the array looping methods, such as forEach(), to iterate through the array and retrieve the value of each property.

Here is an example:

const courses = {
    java: 10,
    javascript: 55,
    nodejs: 5,
    php: 15
};

// convert object to key's array
const keys = Object.keys(courses);

// print all keys
console.log(keys);
// [ 'java', 'javascript', 'nodejs', 'php' ]

// iterate over object
keys.forEach((key, index) => {
    console.log(`${key}: ${courses[key]}`);
});

// java: 10
// javascript: 55
// nodejs: 5
// php: 15

In the above function declaration, I used ES6 syntax. I assume that you are already familiar with ES6 especially arrow functions. If you are new to ES6, take a look at arrow functions guide to learn about it.

Object.values() Method

The Object.values() method was introduced in ES8 and it does the opposite of Object.key(). It returns the values of all properties in the object as an array. You can then loop through the values array by using any of the array looping methods.

Let us look at an example:

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

// iterate over object values
Object.values(animals).forEach(val => console.log(val));

// 🐅
// 🐱
// 🐒
// 🐘

Object.entries() Method

The Object.entries() is another method that was introduced in ES8 and can be used for traversing an object. Unlike Object.values() that creates an array of the values in the object, Object.entries() produces an array of arrays. Each inner array has two elements. The first element is the property; the second element is the value.

Here is an example:

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

const entries = Object.entries(animals);
console.log(entries);

// [ [ 'tiger', '🐅' ],
//   [ 'cat', '🐱' ],
//   [ 'monkey', '🐒' ],
//   [ 'elephant', '🐘' ] ]

To iterate over the array returned by Object.entries(), you can either use the for...of loop or the forEach() method as shown below:

// `for...of` loop
for (const [key, value] of Object.entries(animals)) {
    console.log(`${key}: ${value}`);
}

// `forEach()` method
Object.entries(animals).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});

Conclusion

That's all for iterating over object properties in JavaScript. We looked at four different methods to accomplish this task. for...in is still a good option if you want to support old browsers. Otherwise, just use any of the latest methods: Object.keys(), Object.values() or Object.entries().

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, Buy me a coffee (cost $5) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.