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.
Top comments (4)
I legit did not know you could do:
I thought I was being sly for doing it manually with a single line reduce:
Good to know! I will have to use the shorter version the next time I need an es6 map 😉
There is also the
Object.keys()
method:developer.mozilla.org/en-US/docs/W...
You might be interested in objectFromEntries which can conver Maps into objects or reconstruct entries.
Thanks. Check this example from the MDN:
developer.mozilla.org/en-US/docs/W...