Iterating Through Keys and Values of Objects in JavaScript
Greetings, friends! In this tutorial, I will show you multiple ways of iterating through keys and values of an object. Most of the methods I discuss will return an array of an object's keys and/or values. Once we have an array, we can iterate through it using any of the five ways discussed in my previous article.
Using for...in Loops
We can use for...in loops to iterate through all enumerable properties of an object. Below is an example of iterating through all keys (or property names) of an object.
const obj = { pizzas: 1, donuts: 2, potatoes: 3 };
for (const key in obj) {
console.log(key);
}
/* OUTPUT:
pizzas
donuts
potatoes
*/
Here is an example of using for...in to get all property values of an object.
const obj = { pizzas: 1, donuts: 2, potatoes: 3 };
for (const key in obj) {
console.log(obj[key]);
}
/* OUTPUT:
1
2
3
*/
Using Object.keys
We can use the Object.keys method to return an array containing all keys of an object. Once we have an array, we can iterate through them using a for loop, for...of loop, or Array.forEach. I'm going to go ahead and use Array.forEach since it seems like cleanest approach.
const obj = { pizzas: 1, donuts: 2, potatoes: 3 };
Object.keys(obj).forEach(key => {
console.log(key);
})
/* OUTPUT:
pizzas
donuts
potatoes
*/
Using Object.values
We can use the Object.values method to return an array containing all values of an object. Again, we can use the Array.forEach method to iterate through this new array.
const obj = { pizzas: 1, donuts: 2, potatoes: 3 };
Object.values(obj).forEach(value => {
console.log(value);
})
/* OUTPUT:
1
2
3
*/
Using Object.entries
We can use the Object.entries method to return an array of [key, value] pairs. Each pair is an array. Therefore, this method returns an array of arrays.
const obj = { pizzas: 1, donuts: 2, potatoes: 3 };
const entries = Object.entries(obj);
console.log(entries);
/* OUTPUT:
[
['pizzas', 1],
['donuts', 2],
['potatoes', 3]
]
*/
We can actually log both the keys and values easily by using a for...of loop together with the Object.entries method. We can also use a template literal to make the code look nicer.
const obj = { pizzas: 1, donuts: 2, potatoes: 3 };
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`);
}
/* OUTPUT:
pizzas: 1
donuts: 2
potatoes: 3
*/
Using Object.getOwnPropertyNames
The Object.getOwnPropertyNames method is a special method that returns an array of all keys (property names) of an object including non-enumerable properties. However, it still does not retrieve properties that use Symbols.
const obj = {
pizzas: 1,
donuts: 2,
potatoes: 3,
pies: 4,
[Symbol('cakes')]: 5
};
Object.defineProperty(obj, 'pies', {
enumerable: false
});
// This will only iterate through enumerable properties
for (const key in obj) {
console.log(key);
}
/* OUTPUT:
pizzas
donuts
potatoes
*/
// This will iterate through all properties
Object.getOwnPropertyNames(obj).forEach(key => {
console.log(key);
});
/* OUTPUT:
pizzas
donuts
potatoes
pies
*/
As we can see in the example above, we made pies non-enumerable, which makes it normally invisible to for...in loops or the Object.keys method. However, the Object.getOwnPropertyNames method can still pick up non-enumerable property names as long as they are not Symbols.
Using Object.getOwnPropertySymbols
The Object.getOwnPropertySymbols method is a special method for iterating through properties that are only Symbols.
const obj = {
pizzas: 1,
donuts: 2,
potatoes: 3,
[Symbol('pies')]: 4,
[Symbol('cakes')]: 5
};
Object.getOwnPropertySymbols(obj).forEach(key => {
console.log(key);
});
/* OUTPUT:
Symbol(pies)
Symbol(cakes)
*/
Conclusion
In this tutorial, we have seen multiple ways of iterating through the keys and values of objects. It's important to understand that most methods only look at the enumerable properties of an object, and they only look at non-symbol properties. Methods like Object.getOwnPropertyNames and Object.getOwnPropertySymbols can get around these limitations.