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:
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:
const object = {
city: "New York",
state: "New York",
country: "USA"
};
const entries = Object.entries(object);
console.log(entries);
[ [ 'city', 'New York' ], [ 'state', 'New York' ], [ 'country', 'USA' ] ]
Now we can just iterate over this like any other array:
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}`);
}
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:
const object = {
city: "New York",
state: "New York",
country: "USA"
};
for (const key in object) {
console.log(`${key}: ${object[key]}`);
}
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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!