In this post we cover how to use forEach with an Object in JavaScript
How to use forEach with an Object in JavaScript
To be able to use the Array.prototype.forEach method on an object, we first need to convert the object into an array.
There are a number of ways to do this:
- If you want to get both the key and value of each item in the object, then you will want to use Object.entries.
- If you only want to get the keys, use Object.keys.
- Lastly, if you only want the values, use Object.values.
Here is the code for how you can do this in each way:
1const fruits = { apples: 5, oranges: 3, pears: 4 };
2
3const fruitsArray = Object.entries(fruits);
4// [["apples", 5], ["oranges", 3], ["pears", 4]]
5
6fruitsArray.forEach(
7 ([key, value]) => console.log(key, ' ', value)
8);
9// apples 5
10// oranges 3
11// pears 4In the above example of how to use forEach with an Object in JavaScript we use the Object.entries method on our object to convert it into an array of key value pairs.
1const fruits = { apples: 5, oranges: 3, pears: 4 };
2
3const fruitsArray = Object.keys(fruits);
4// ["apples", "oranges", "pears"]
5
6fruitsArray.forEach((key) => console.log(key));
7// apples
8// oranges
9// pearsIn the above example of how to use forEach with an Object in JavaScript we use the Object.keys method on our object to convert it into an array of keys.
1const fruits = { apples: 5, oranges: 3, pears: 4 };
2
3const fruitsArray = Object.values(fruits);
4// [5, 3, 4]
5
6fruitsArray.forEach((value) => console.log(value));
7// 5
8// 3
9// 4In the above example of how to use forEach with an Object in JavaScript we use the Object.values method on our object to convert it into an array of values.
In summary to use forEach with an Object in JavaScript you need to first convert your object into an array so that you can use the Array.prototype.forEach method.
Array.prototype.forEach
Array.prototype.forEach or Array.forEach is a method on a Javascript array that will allow you to use a callback function to loop over each item in the array.
It is essentially syntactic sugar for a for loop with a given array, although it is not an exact replacement for a for loop because of things like async code.
The callback will be called for each iteration of the loop with each item passed in as an argument of the callback.
Object.keys
The Object.keys method converts an object into an array of its keys.
So you will end up with an array of all the property keys in an object.
For example if you have an object containing a few trees where the keys are the names of the trees and the values are the number of trees you have and you pass it into Object.keys then it will return an array of the names of all the trees.
{ oak: 2, ash: 3, maple: 4 } => [ "oak", "ash", "maple"]
Object.entries
The Object.entries method in Javascript enables you to convert an object into an array of key value pairs.
What this means is that each item in the array created by Object.entries is itself an array of two items, the first being the key of the item and the second being the value of the item.
So if you passed in an object with a single property which was "apples" with a value of 5 ({ apple: 5 }), then Object.entries would convert it into an array containing 1 item where the item would be an array. At the 0th index of the array would be "apples" and at the first index of the array would be the value 5 ([["apples", 5]]).
{ apples: 5, oranges: 3 } => [["apples", 5], ["oranges", 3]]
Object.values
The Object.values method converts an object into an array of its values.
So you will end up with an array of all the property values in an object.
For example if you have an object containing a few plants where the keys are the names of the plants and the values are the number of plants you have and you pass it into Object.values then it will return an array of the amount of all the plants you have.
{ mint: 2, daisy: 3, chilli: 4 } => [2, 3, 4]
Further resources
Related topics
Save code?
