Object.entries Javascript Object.entries() and Object.values() Methods in JavaScript

This post was originally published on attacomsian.com/blog.

---

The Object.entries() and Object.values() methods were introduced to JavaScript Object constructor with the release of ECMAScript 2017 (ES8). Let us have a quick look at these useful methods.

Object.entries() Method

The Object.entries() method takes an object as argument and returns an array with arrays of key-value pairs:

const birds = {
    owl: '🦉',
    eagle: '🦅',
    duck: '🦆'
};

const entries = Object.entries(birds);
console.log(entries);

// [['owl', '🦉'], ['eagle', '🦅'], ['duck', '🦆']]

The order of the array element do not depend on how the object was defined. The order is same as that provided by a for...in loop.

Iterating through an Object

We can use Object.entries() to iterate over object as well:

// using `for...of` loop
for (const [key, value] of Object.entries(birds)) {
    console.log(`${key}: ${value}`);
}

// owl: 🦉
// eagle: 🦅
// duck: 🦆

// using array destructuring
Object.entries(birds).forEach(([key, value]) => console.log(`${key}: ${value}`));

// owl: 🦉
// eagle: 🦅
// duck: 🦆

Converting an Object to a Map

Since the Map constructor also takes an iterable of entries to initialize a map object, the Object.entries() method can be used to create a map from an object:

const map = new Map(Object.entries(birds));

console.log(map.size); // 3
console.log(map.has('owl')); // true
console.log(map.get('duck')); // 🦆

Object.values() Method

The Object.values() method works very much like Object.entries(), but only returns the values of the own enumerable string-keyed properties in the same order as provided by the for...in loop:

const foods = {
    cake: '🍰',
    pizza: '🍕',
    candy: '🍬',
    icecream: '🍨'
};

const values = Object.values(foods);
console.log(values);

// ['🍰', '🍕', '🍬', '🍨']

Both Object.values() and Object.entries() do not follow the prototype chain and only iterate through the properties that are directly added to the given object. They also ignore all non-enumerable properties as well:

Object.defineProperty(foods, 'sushi', {
    value: '🍣',
    writable: true,
    configurable: true,
    enumerable: false
});

console.log(Object.values(foods));

// ['🍰', '🍕', '🍬', '🍨']

Converting an Object to Set

Since the Set constructor accepts an iterable, with Object.values(), we can easily convert an Object to a Set:

const set = new Set(Object.values(foods));

console.log(set.size); // 4
console.log(set.has('🍨')); // true

---

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

---

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Comments

[Brad]

I legit did not know you could do:

const map = new Map(Object.entries(birds));

I thought I was being sly for doing it manually with a single line reduce:

const map = Object.entries(birds).reduce(
  (map, [key, value]) => map.set(key, value),
  new Map()
);

Good to know! I will have to use the shorter version the next time I need an es6 map 😉

[Mauro Porras]

There is also the Object.keys() method:

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

developer.mozilla.org/en-US/docs/W...

[Adam Crockett 🌀]

You might be interested in objectFromEntries which can conver Maps into objects or reconstruct entries.

[Mauro Porras]

Thanks. Check this example from the MDN:

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }

developer.mozilla.org/en-US/docs/W...