Keys, Values, and Entries Methods in JavaScript

The methods Object.keys(), Object.values(), and Object.entries() are static methods of the global Object object that allow you to extract information about the composition of objects.

As we know and have seen, objects in JavaScript are data structures that allow us to store and organize data in key-value pairs.

With these methods, we can obtain information about the keys, values, and key-value pairs that make up an object, for further manipulation.

Using the Methods

Using these methods is very simple, we would simply call each of them like this:

Object.keys(obj)
Object.values(obj)
Object.entries(obj)

Let’s look at each one in detail 👇

Object.keys() Method

The Object.keys() method returns an array with the names of the enumerable properties of an object. The list of keys is returned in the same order as they occur in a for...in loop over the object.

Let’s see it better with an example. Suppose the following object:

const person = {
  name: "Ana",
  age: 25,
  city: "Madrid"
};

To get the keys of this object:

const keys = Object.keys(person);

console.log(keys); // ["name", "age", "city"]

Practical Examples

Object.keys(person).forEach(key => {
console.log(`${key}: ${person[key]}`);
});

const keysLongerThan4Letters = Object.keys(person).filter(key => key.length > 4);
console.log(keysLongerThan4Letters); // ["name", "city"]

Object.values() Method

The Object.values() method returns an array with the values of the enumerable properties of an object. The order of the values matches the order of the keys.

Continuing with our example, if we use the same persona object:

const values = Object.values(person);
console.log(values); // ["Ana", 25, "Madrid"]

Practical Examples

const ageAndCityValues = Object.values(person).slice(1, 3);
console.log(ageAndCityValues); // [25, "Madrid"]

const lengthsOfValues = Object.values(person).map(value => value.toString().length);
console.log(lengthsOfValues); // [3, 2, 7]

Object.entries() Method

The Object.entries() method returns an array of key-value pairs in the form of nested arrays. Each sub-array contains two elements: the property name and its value.

That is, if we apply it to our persona example, we would have the following:

const entries = Object.entries(person);

console.log(entries);
// [["name", "Ana"], ["age", 25], ["city", "Madrid"]]

Practical Examples

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

const arrayOfObjects = Object.entries(person).map(([key, value]) => ({ key, value }));
console.log(arrayOfObjects);
// [{ key: "name", value: "Ana" }, { key: "age", value: 25 }, { key: "city", value: "Madrid" }]