DEV Community

Atta
Atta

Posted on • Edited on • Originally published at attacomsian.com

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

#webdev #javascript #codenewbie #beginners

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', '🦆']]
Enter fullscreen mode Exit fullscreen mode

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: 🦆
Enter fullscreen mode Exit fullscreen mode

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')); // 🦆
Enter fullscreen mode Exit fullscreen mode

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

// ['🍰', '🍕', '🍬', '🍨']
Enter fullscreen mode Exit fullscreen mode

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

// ['🍰', '🍕', '🍬', '🍨']
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

✌️ 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)

Collapse
 
bradtaniguchi profile image
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 😉

Collapse
 
mauroporras profile image
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...

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

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

Collapse
 
mauroporras profile image
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...

Read next

peterdanwan profile image

Testing LLM Applications: Misadventures in Mocking SDKs vs Direct HTTP Requests

Peter Wan -

jackdavid profile image

🚀 Introducing SuperPowerGenerator.com! 💥

Jack David -

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -

reversecher profile image

Building a Free Online Music Creator: Free Incredibox Sprunki

reverse Ch -