Introduction

We have explored .keys(), .values(), .entries() in Maps and Sets before. These methods are also available for Objects, though the syntax is slightly different.

Object.keys(), Object.values(), Object.entries()

• Object.keys() - returns an array of keys. Takes an object variable as an input.

let user = {
    name: "John",
    surname: "Connors",
    occupation: "Leader of the resistance group",
};

let arr = Object.keys(user);
console.log(arr); //This would return ['name', 'surname', 'occupation']

• Object.values() - returns an array of values. Also, it takes an object variable as input.

let user = {
    name: "John",
    surname: "Connors",
    occupation: "Leader of the resistance group",
};

let arr = Object.values(user);
console.log(arr); // ['John', 'Connors', 'Leader of the resistance group']

• Object.entries() - returns an array of key-value pairs. This too takes an object variable as an input.

let user = {
    name: "John",
    surname: "Connors",
    occupation: "Leader of the resistance group",
};

let arr = Object.entries(user);
console.log(arr); 
/* [ ['name', 'John'], ['surname', 'Connors'], 
['occupation', 'Leader of the resistance group'] ] */

What’s the difference and why is the syntax different?

The notable difference is that map.keys(), map.values(), map.entries() returns an iterable, while Object.keys(), Object.values(), Object.entries() returns an array upon which methods like map, filter, reduce, etc. can be used.

The syntax is different mainly because of flexibility. Javascript Objects are the foundation of all data structures in Javascript. So if we create our own data structure let’s say, world, and world.values() returns the population in the world, then we can do the same using Object.values(world) too.

How to use Array methods like map, filter, etc. to Objects?

In case we need to apply map, filter methods on Objects, we can convert the Object into key-value pairs using Object.entries() and then re-convert them into an Object using Object.fromEntries().

let prices = {
    banana: 1,
    orange: 2,
    mango: 4,
};a

let doublePrices = Object.entries(prices);
doublePrices = doublePrices.map((entry) => [entry[0], entry[1] * 2]);
doublePrices = Object.fromEntries(doublePrices);

console.log(doublePrices);

Don’t be confused by the syntax [entry[0], entry[1] * 2]. When we use Object.entries(), the output is an array of key-value pairs. So it looks something like this:

[ ['banana', 1], ['orange', 2], ['mango', 4] ]

Now when we apply map to this array, what we are doing is each element of the whole array is an array itself. so we are accessing each array from the whole array, keeping the keys (entry[0]) as it is and modifying the values (entry[1]) only.

Links

I have attached the GitHub link to the code related to the topics covered in this blog. You can check it out for your reference.

All about Object.keys(), Object.values(), Object.entries()

Final thoughts

If you like this article, give it a like. Also, any suggestion regarding how can I improve myself when it comes to writing blogs is welcome too. If you find any error in the article, feel free to point it out.

Thank you.

You can follow me on GitHub, LinkedIn.