Mastering JS
Tutorials Newsletter eBooks
Tutorials Newsletter eBooks
Tutorials / Fundamentals /

Iterating Through an Object with `forEach()`

May 29, 2020

JavaScript's Array#forEach() function lets you iterate over an array, but not over an object. But you can iterate over a JavaScript object using forEach() if you transform the object into an array first, using Object.keys(), Object.values(), or Object.entries().

Using Object.keys()

The Object.keys() function returns an array of the object's own enumerable properties. You can then iterate over each key in the object using forEach().

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]);
});

Using Object.values()

The Object.values() function returns an array of the object's own enumerable property values. In other words, it returns an array over the object's values that you can iterate through using forEach().

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

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

Using Object.entries()

The Object.entries() function returns an array of entries. An entry is an array of length 2, where entry[0] is the key and entry[1] is the value. You can iterate through both keys and values simultaneously:

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);
});

More Fundamentals Tutorials