Use Array forEach() to loop through JavaScript object

In this article, we will see how to loop through an object and return the key and value using forEach() method in JavaScript.

So, here, we will learn about 3 different ways to loop through JavaScript objects to retrieve multiple key-value pairs and also do object to array conversion.

For looping through an object in JavaScript we will use:

1. Object.entries()
2. Object.keys()
3. Object.values()

Lets see each with an example using forEach() method.

But first, let’s understand looping a JavaScript using forEach()

Can we use foreach() on object in JavaScript?

The answer is no, we cannot directly loop through the properties in an object using the forEach() method.

The forEach() method is used to loop through an array and it cannot be used with an object.

Let’s see what happens when we use forEach with a JavaScript object.

const obj = {
    name: 'Eminem',
    occupation : 'Rapper',
    country: 'USA'
}

obj.forEach(e => console.log(e))

Output:

obj.forEach is not a function

So, when we run this, we get an error : obj.forEach is not a function

So, how do we loop through a Javascript object using forEach?

To loop through its properties we have to first convert the object into an array and then iterate through all its key-value pairs.

To do this we will use Object.entries(), Object.values() and Object.keys() which were introduced in ES6 and ES8 in JavaScript.

Using Object.entries() to loop through JavaScript Object.

The Object.entries() method returns an array containing the key-value pairs of a given object in JavaScript.

Syntax:

Object.entries(obj)

Once we get the array of the given object we can use forEach to loop through each property. For Example:

const obj = {
    name: 'Eminem',
    occupation : 'Rapper',
    country: 'USA'
}

Object.entries(obj).forEach((e) => {
  console.log(e)
})

Output:

[ 'name', 'Eminem' ]
[ 'occupation', 'Rapper' ]
[ 'country', 'USA' ]

In the above code, Object.entries() converted the object into an array, and then we get each key-value property of the object as an array by forEach().

If you don’t want the output in an array containing key and value, we can simplify it using array destructuring ([key,val]). For Example:

Object.entries(obj).forEach(([key,val]) => {
  console.log(key + ':' + val)
})

Output:

name:Eminem
occupation:Rapper
country:USA

In the above code, we are using array destructuring [key, val] to get the output.

Using Object.keys() with forEach() to loop through Object

The Object.keys() method in JavaScript returns an array containing all the keys (properties names) from a given object.

Syntax:

Object.keys(obj)

Example:

const obj = {
    name: 'Eminem',
    occupation : 'Rapper',
    country: 'USA'
}
console.log(Object.keys(obj)) // [ 'name', 'occupation', 'country' ]

Next, using forEach(), we can iterate through the keys and find the value of each key in the JavaScript object. For Example:

Object.keys(obj).forEach(key => {
  console.log(key + ':' + obj[key])
})

Output:

name:Eminem
occupation:Rapper
country:USA

Using Object.values() with forEach() to loop through Object

This method is the same as Object.keys() but instead of returning the keys, it returns all the values from the key-value pairs in an object.

The Object.values() method in JavaScript returns an array of own property values of an object.

Syntax:

Object.values(obj)

Example:

const obj = {
    name: 'Eminem',
    occupation : 'Rapper',
    country: 'USA'
}

console.log(Object.values(obj)) // [ 'Eminem', 'Rapper', 'USA' ]

Once we get the array of the values, we can then use forEach() to loop through the values. For Example:

Object.values(obj).forEach(val => {
  console.log(val)
})

Output:

Eminem
Rapper
USA