Blog / Javascript

How to get the JavaScript forEach key value pairs from an object

How to get the JavaScript forEach key value pairs from an object

In this short post we are going to take a brief look at the ways in which you can use the Array.prototype.forEach method to get the key value pairs from an object.

Will MaygerWill Mayger
September 09, 2021
Article

In this short post we are going to take a brief look at the ways in which you can use the Array.prototype.forEach method to get the key value pairs from an object.

If you want to read more into how you can use the JavaScript forEach method with an object I recommend taking a look at my post about it here.

Let’s now look at how you can get the JavaScript forEach key value pairs from an object

How to get the JavaScript forEach key value pairs from an object

The first and easiest way to get the key value pairs from an object with the JavaScript forEach method is by combining it with Object.entries.

Here is an example of how to get the JavaScript forEach key value pairs from an object with Object.entries:

const myObj = { a: 1, b: 2, c: 3 }
Object.entries(myObj).forEach(([key, value]) => {
  console.log(key, value)
})
// "a", 1
// "b", 2
// "c", 3
javascript foreach key value

In the above example we are using Object.entries to first convert the object into an array of key value pairs.

We then use forEach with the array of key value pairs so that we can iterate through each of them. The key value pairs in the array are stored as an array as well, the first index will be relating to the key and the second index relating to the value.

All we have to do from there is to destructure the key value pair array and save the first index as a variable named key and the second as the value and then we have access to the key value pairs using the JavaScript forEach method.

Using Object.keys with forEach to get the key value pairs

Another option is to use Object.keys with forEach instead of using Object.entries.

The main difference here is that instead of getting an array of key value pairs from an object we will instead be given an array of keys which we can then use to perform a lookup on the object to get the value.

Here is how this will look:

const myObj = { a: 1, b: 2, c: 3 }
Object.keys(myObj).forEach(key => {
  const value = myObj[key]
  console.log(key, value)
})
// "a", 1
// "b", 2
// "c", 3

As you can see this ends up giving us the same result.

If you want to learn more about the various ways to use forEach with an object you can find out more here.

Summary

There we have how to get the JavaScript forEach key value pairs from an object, if you want more like this be sure to check out some of my other posts!

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app

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

Become an expert in ReactJS, TypeScript, and JavaScript.

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.

Good things are coming, don't miss out!

Good things are coming, don't miss out!

Follow me on Twitter to stay up to date and learn frontend, React, JavaScript, and TypeScript tips and tricks!

Are you a novice, intermediate or expert react engineer?

Find out here by taking my fun, interactive, quick quiz which takes approximately 1 - 3 minutes. How well will you will do?

Foxi - Budget Planner & Tracker

Foxi

Budget Planner & Tracker

More money in your pocket by the end of the month.

Free to use and no account needed.

Get started now.

Get the app