Object.entries() Method

Object.entries() also goes hand in hand with the Object.keys() and Object.values() methods. However, where each of those methods returned an array of keys or values respectively, for each [key, value] pair in an object, Object.entries() will return an array of...well, [key, value]. Let's check it out. Once again I'll be using the same examples from Object.keys() and Object.values().

const person = {  name: "Joey",  age: 31,  occupation: "Web Developer",  location: "Austin, Texas",  hungry: true,};
const objEntries = Object.entries(person);console.log(objEntries);// expected output:// [["name", "Joey"], ["age", 31], ["occupation", "Web Developer"], ["location", "Austin, Texas"], ["hungry", true]]

If Object.values() is the contents of the box, and Object.keys() is the tape that holds the box together, then Object.entries() is the whole box. It gives us a way to iterate over the entire data object, including both keys and values. And it does so in a way that some might find easier to read than a for...in loop.

The above code produces the same result as this for...in loop:

let loopedEntries = [];for (entry in person) {  loopedEntries.push([entry, person[entry]]);}console.log(loopedEntries);// expected output:// [["name", "Joey"], ["age", 31], ["occupation", "Web Developer"], ["location", "Austin, Texas"], ["hungry", true]]

As with Object.keys() and Object.values(), one should be on the lookout for numeric keys and the order in which they are output:

const obj = {  5: "Giraffe",  70: "Octopus",  17: "Lion",  1: "Armadillo",  0: "Puffin",};
const objEntries = Object.entries(obj);console.log(objEntries);// expected output:// [["0", "Puffin"], ["1", "Armadillo"], ["5", "Giraffe"], ["17", "Lion"], ["70", "Octopus"]]

And lastly, if you run Object.entries() against a simple array, you get arrays with both the indices and the values:

const colors = ["red", "orange", "yellow", "green", "blue", "violet"];
const objEntries = Object.entries(colors);console.log(objEntries);// expected output:// [["0", "red"], ["1", "orange"], ["2", "yellow"], ["3", "green"], ["4", "blue"], ["5", "violet"]]

From MDN: The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for...in loop enumerates properties in the prototype chain as well).

See more examples and documentation here.