How to Iterate through Key-Values of a JavaScript Object

In JavaScript, objects can be thought of as a collection of key-value pairs. The keys are strings and the values can be any type of data.

The type of data can be anything ranging from a string, number, boolean, array, object, function, or even another object.

In this article, we will look at all the different ways you can iterate over the key-value pairs of an object in JavaScript.

Iterating using entries()

The most common way to iterate over an object is using the entries() method. This method returns an array of key-value pairs of the object, which we can then iterate over.

Let's first start with our example object:

JAVASCRIPT
const object = {
    city: "New York",
    state: "New York",
    country: "USA"
};

Now let's use the entries() method to get an array of key-value pairs:

JAVASCRIPT
const object = {
    city: "New York",
    state: "New York",
    country: "USA"
};

const entries = Object.entries(object);

console.log(entries);

BASH
[ [ 'city', 'New York' ], [ 'state', 'New York' ], [ 'country', 'USA' ] ]

Now we can just iterate over this like any other array:

JAVASCRIPT
const object = {
    city: "New York",
    state: "New York",
    country: "USA"
};

const entries = Object.entries(object);

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

BASH
city: New York
state: New York
country: USA

Iterating using for...in

Another way to iterate is to instead use the for...in loop. This loop will iterate over the keys of the object.

You can then take this key and use it to get the corresponding value:

JAVASCRIPT
const object = {
    city: "New York",
    state: "New York",
    country: "USA"
};

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

BASH
city: New York
state: New York
country: USA

This method is a bit less verbose and more readable than the entries() method.

Conclusion

In this post, we learned how to iterate over the key-value pairs of an object in JavaScript.

You can either use the entries() method or the for...in loop and then iterate through each of the key-value pairs.

Thanks for reading!

• Support Us