keys(), values() and entries()

These three methods differ only in the shape of the result that they give you. Object.keys gives you the property names as an array. Object.values gives you the property values as an array. Object.entries gives you an array of pairs, and each pair is a two-item array with the name and the value together.

Choosing between them depends on what you plan to do with the result. If you want to look up a value by its name, then Object.keys together with bracket access is enough. If you want to work with the values directly, then Object.values saves you the lookup. If you want both halves, then Object.entries saves you from looking every value up again, and it pairs nicely with destructuring inside a for...of loop.

There is one subtlety that is worth knowing about Object.values. It gives you the values in the order in which the keys appear, but it gives you no way to tell which key a value came from. When the values are not all different, that information is lost. Object.entries is the only one of the three methods that keeps it.

Two more practical notes will save you time later. All three methods return a brand new array every time you call them, so calling one inside a loop wastes work, and it is better to call it once and reuse the result. And because they return only the own, listable, string-named properties, they will not show you anything that came from the prototype, and they will not show symbol keys either. For symbol keys you need Object.getOwnPropertySymbols.

Object.entries converts an object into an array of name and value pairs, and Object.fromEntries converts an array of pairs back into an object. Once you have the array, every array method becomes available to you, and that is usually the reason you made the conversion in the first place.

const scores = { ada: 10, bob: 20 };

// Turn the object into an array of pairs.
console.log(Object.entries(scores));   // [['ada', 10], ['bob', 20]]

// Sort the array by value, highest first.
const pairs = Object.entries(scores);
pairs.sort(function (a, b) {
  return b[1] - a[1];
});
console.log(pairs);   // [['bob', 20], ['ada', 10]]

// And back into an object again.
console.log(Object.fromEntries(pairs));   // { bob: 20, ada: 10 }

// Change every value while you are passing through.
const doubled = [];
const source = Object.entries(scores);
for (let index = 0; index < source.length; index++) {
  doubled.push([source[index][0], source[index][1] * 2]);
}
console.log(Object.fromEntries(doubled));   // { ada: 20, bob: 40 }

The ranking example is the common real-world case. Objects have no order of their own, so the moment you want the highest entry or a sorted list, you have to turn the object into an array, sort the array, and only then pick out the result. Turning it back into an object with fromEntries keeps the sorted order, because names that look like array indexes are placed first in number order and the rest keep the order in which you added them.

There are two rules to remember. The name in each pair must be a string or a symbol, so a number is quietly turned into a string. And the same name may appear more than once in the array of pairs, but the last one wins when the object is built, which is the same rule that applies when you use a Map to remove duplicates.

For a large object, converting it to an array on every single lookup is wasteful. Build the array once and reuse it, or keep a Map that is keyed by the property name, and then use that instead.

The entries method converts an object into an array of key and value pairs, and fromEntries converts an array of pairs back into an object. Once you have the array, every array method is available, which is usually the reason you made the conversion.

const scores = { ada: 10, bob: 20 };

// Object to array of pairs.
console.log(Object.entries(scores));   // [["ada", 10], ["bob", 20]]

// Sort it by value, highest first.
const ranked = Object.entries(scores).sort((a, b) => b[1] - a[1]);
console.log(ranked);   // [["bob", 20], ["ada", 10]]

// And back to an object.
console.log(Object.fromEntries(ranked));   // { bob: 20, ada: 10 }

// Transform the values on the way through.
console.log(Object.fromEntries(Object.entries(scores).map(([k, v]) => [k, v * 2])));
// { ada: 20, bob: 40 }

The ranking example is the common real-world case. Objects have no inherent order, so once you want the top entry or a sorted list you have to turn them into an array, sort it, and only then pick out the result. Going back to an object with fromEntries keeps the sorted order, because string keys that look like array indices are ordered numerically first and then the rest keep their insertion order.

There are two constraints to remember. A key in the pairs array must be a string or a symbol, so a numeric key gets converted to a string. And duplicate keys are allowed in the pairs array, but the last one wins when the object is built, so the same rule applies as with the Map approach to deduplication.

For a large object, converting it to an array on every lookup is wasteful. Build the array once, or keep a Map keyed by the property name, and reuse it.