The methods Object.keys(), Object.values(), and Object.entries() are static methods of the global Object that allow to extract information about the composition of objects.
As we know, we have seen that 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 of an object that make up the object, for further manipulation.
- Object.keys(): Returns an array of keys.
- Object.values(): Returns an array of values.
- Object.entries(): Returns an array of key-value pairs.
Usage of the methods
The use of these methods is very simple; we would just call each of them like this,
Object.keys(obj)
Object.values(obj)
Object.entries(obj)- obj: The object from which you want to obtain the keys.
- Order of properties: The methods return the elements in the order in which properties are added to the object (but generally, don’t rely on it)
- Enumerability: Only enumerable properties appear in the result.
Let’s look at each of them in detail 👇
Object.keys() Method
The Object.keys() method returns an array containing 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.
We can see this better with an example. Let’s assume the following object:
const person = {
name: "Ana",
age: 25,
city: "Madrid"
};To obtain the keys of this object:
const keys = Object.keys(person);
console.log(keys); // ["name", "age", "city"]Practical examples
Iterating over properties
You can use Object.keys() to iterate over the keys of an object in a forEach loop or a for...of loop.
Object.keys(person).forEach(key => {
console.log(`${key}: ${person[key]}`);
});Filtering properties
You can filter specific keys based on certain criteria.
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 containing the values of the enumerable properties of an object. The order of the values corresponds to the order of the keys.
Continuing with our example, if we use the same person object:
const values = Object.values(person);
console.log(values); // ["Ana", 25, "Madrid"]Practical examples
Getting an array of values
Ideal for obtaining an array of values if you only need to work with them and not with the keys.
const ageAndCityValues = Object.values(person).slice(1, 3);
console.log(ageAndCityValues); // [25, "Madrid"]Manipulating data
You can apply array methods like map, filter, or reduce directly on the values of an object.
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 person example, we would have the following:
const entries = Object.entries(person);
console.log(entries);
// [["name", "Ana"], ["age", 25], ["city", "Madrid"]]Practical examples
Iterating over key-value pairs
You can use Object.entries() in a for...of loop to obtain both the key and the value of each property.
for (const [key, value] of Object.entries(person)) {
console.log(`${key}: ${value}`);
}Transforming objects
You can use Object.entries() to transform objects into other formats, such as arrays of objects.
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" }]