How to Use forEach() with Key Value Pairs

Jul 14, 2021

JavaScript's forEach() function takes a callback as a parameter, and calls that callback for each element of the array. It calls the callback with the value as the first parameter and the array index as the 2nd parameter.

// Prints "0: a, 1: b, 2: c"
['a', 'b', 'c'].forEach(function callback(value, index) {
  console.log(`${index}: ${value}`);
});

forEach() is a method on JavaScript arrays, not objects. To iterate over an object, you must turn it into an array using Object.entries(), Object.keys(), or Object.values(). After that, you can then use forEach() to iterate through the keys, values, or entries:

const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// Prints "name Jean-Luc Picard" followed by "rank Captain"
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// Prints "Jean-Luc Picard" followed by "Captain"
Object.values(obj).forEach(val => {
  console.log(val);
});

const obj = {
  name: 'Jean-Luc Picard',
  rank: 'Captain'
};

// Prints "name Jean-Luc Picard" followed by "rank Captain"
Object.entries(obj).forEach(entry => {
  const [key, value] = entry;
  console.log(key, value);
});

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

How to Use forEach() with Key Value Pairs

More Fundamentals Tutorials