Blog / Javascript

How to use forEach with an Object in JavaScript

How to use forEach with an Object in JavaScript

Learn everything you need to know about how to use forEach with an Object in JavaScript, including key value pairs and object to array conversion methods.

Will MaygerWill Mayger
September 02, 2021
Article

In this post we will be covering how to use forEach with an Object in JavaScript with as little technical jargon as possible so you will have everything you need right here without having to look any further!

It is possible to use Array.prototype.forEach with an object in JavaScript and that is exactly what we are going to look at doing in this post.

The forEach method is a method attached to the Array object and is not an object method so to be able to use it with an object we are going to need to do some extra work to be able to perform a conversion of object to array in JavaScript first.

If you want to find how to get the index in a forEach loop in JavaScript, I have a post here that shows how to in detail.

Let’s get started and look at how we can use forEach Object in JavaScript.

How to use forEach with an Object in JavaScript

In as few words as possible, to use forEach with an Object in JavaScript we need to convert the object into an array.

The best method to do this is by using Object.entries because the entries method will return the object properties as key value pairs in the form of an array.

When we combine this with the forEach method it means we can then effectively use forEach with an Object for iterating through the keys and values of an object.

Here is an example of iterating in javascript foreach object with key value pairs:

const myObject = {
  someKey: "some value",
  hello: "World",
  js: "javascript foreach object",
}

Object.entries(myObject).forEach(([key, value]) => {
  console.log(key, value) // "someKey" "some value", "hello" "world", "js javascript foreach object"
})
javascript foreach object with key, value pairs from Object.entries and Array.prototype.forEach

As you can see we have already been able to make use of forEach to be able to iterate through the properties of an object by first converting it into an array using Object.entries and then getting the key value pairs from it.

In the above example of Object.entries with forEach you will notice that the argument that we are accepting is [key, value] that is because we are destructuring an array.

When using Object.entries, it will convert the object into an array of key value pairs which are stored as nested arrays with a total of 2 array items in each, the key and the value.

The first index in one of these nested arrays will be the key and the second index will be the value.

So for example:

const objectEntries = [["someKey", "some value"]]
const firstEntry = objectEntries[0]
const key = firstEntry[0]
const value = firstEntry[1]
key value example from Object.entries

Whilst using entries with forEach with an object is the easiest way, there are still many other ways in which we can iterate through an object in JavaScript which could be more suited to your needs.

Using Object.keys with forEach in JavaScript

Another popular method for getting keys and values as an iterable from an object in JavaScript is with Object.keys and Array.prototype.forEach.

Using Object.keys will return all the keys of an object as an iterable array.

The reason why the Object.keys method works is because we can perform a lookup with each key in the array to find the value so that we end up with both the key and the value if needed.

Here is an example of how to use Object.keys with forEach to get the key value pairs:

const myObject = {
  someKey: "some value",
  hello: "World",
  js: "javascript foreach object",
}

Object.keys(myObject).forEach(key => {
  const value = myObject[key]
  console.log(key, value) // "someKey" "some value", "hello" "world", "js javascript foreach object"
})
object.keys foreach example

As you can see this method of using Object.keys with forEach works because we get an array of all the keys in the object that when we iterate through using forEach we can use each key to perform a lookup on the original object to then get the value from as well.

Using Object.values with forEach in JavaScript

The last way to convert an object into an array in JavaScript is to use the values in the object rather than key value pairs or the keys and we can do this with Object.values.

Using Object.values works in a similar way to Object.keys but instead of getting an array of the keys you get an array of the values from the object.

Using Object.values generally will have less use cases than the Object.entries or Object.keys because you can’t relate it to a key afterwards which means you can’t perform any further lookups.

With that said, if you just want to iterate through the values of an object using forEach then Object.values is perfect for it because it will provide all the values in a given object as an array that you can then loop through using Array.prototype.forEach.

Here is an example using Object.values with forEach in JavaScript:

const myObject = {
  someKey: "some value",
  hello: "World",
  js: "javascript foreach object",
}
Object.values(myObject).forEach(value => {
  console.log(value) // "some value", "world", "javascript foreach object"
})
object.values with foreach

Creating your own JavaScript forEach object helper method

Now we have covered how to use forEach with an object by converting it to an array, let’s take a look at how we can improve on this and create our own helper method.

For the most part, you probably won’t need to create your own helper method because using Object.entries with Array.prototype.forEach is pretty concise and doesn’t add much overhead, but there might be the odd occasion where it is useful.

Here is an example of a generic helper method to run forEach on an object in JavaScript:

function forEachObject(someObj, callback) {
  Object.entries(someObj).forEach((entry, ...rest) =>
    callback(entry[0], entry[1], ...rest)
  )
}

const myObject = {
  someKey: "some value",
  hello: "World",
  js: "javascript foreach object",
}

forEachObject(myObject, (key, value) => console.log(key, value)) // "someKey" "some value", "hello" "world", "js javascript foreach object"
helper method to create custom function to use forEach with an Object

As you can see, creating a helper method to be able to convert an object to an array and then loop over it using forEach is pretty easy to do.

Summary

There we have how to use forEach with an Object in JavaScript, if you want more like this be sure to check out some of my other posts!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.