JavaScript

JavaScript Object.keys(), Object.values() and Object.entries() methods – Explained

Objects are a data type in JavaScript which is used to store data in the form of key: value pairs; Working with this data can become a tedious task because objects themselves are not iterable in JavaScript. So we just translate them into arrays which are iterable objects.

The Object.keys, .values and .entries methods are built-in JavaScript methods that help us convert objects into arrays so we can work with data stored in objects in an efficient manner. These three methods take objects as parameters and return an array consisting of strings. If the argument is an array, it will be treated as an object. They iterate over the keys/values (or both) of the object one by one just like a loop

In this guide we will comprehensively discuss the Object.keys, .values() and .entries() methods; So let’s get started with the Object.keys method:

How to access object keys in JavaScript

The Object.keys() method is used to access the keys (properties) of an object by passing the object to it as a parameter.  It will return all of its keys as strings in an array. Now we will take a look at the syntax and an example of the Object.keys method to better understand how it works:

Syntax

Object.keys(myObject);

The myObject is the object whose enumerable property names we want. Now let’s look at an example:

const user = {firstName:"Mary", lastName:"Jane", age:23, id:01};
console.log(Object.keys(user));

How to access object values in JavaScript

The Object.values() method is used to access the values of an object by passing the object to it as a parameter.  It will return all of the values of its properties as strings in an array. The syntax of the Object.values() method is same as the Object.keys() method, just replace .keys with .values:

Object.values(myObject);

Now, let’s look at an example:

const user = {firstName:"Mary", lastName:"Jane", age:23, id:01};
console.log(Object.values(user));

How to access each object entry in JavaScript

The Object.entries() method is used to access the keys (properties) of an object and their values by passing the object to it as a parameter. It will return all of its keys and their values as strings in an array. Its syntax is just like the previous two methods:

Object.entries(myObject);

Following is the example of the Object.entries() method:

const user = {firstName:"Mary", lastName:"Jane", age:23, id:01};
console.log(Object.entries(user));

We can access any entry using the array index:

const user = {firstName:"Mary", lastName:"Jane", age:23, id:01};
console.log(Object.entries(user)[0]);

If we want to access the key or its value inside the array then we will need to provide two indices:

const user = {firstName:"Mary", lastName:"Jane", age:23, id:01};
console.log(Object.entries(user)[0][1]);

Conclusion

Until very recently JavaScript lacked the tools needed for reading and manipulating keys of objects and their values. But in recent versions JavaScript has provided some standard methods for accessing the entries of an object. The Object.keys, .values and .entries are three such methods which are used to extract data from JavaScript objects for further processing. In this how-to guide we learned to use the Object.keys, .values and .entries methods in JavaScript.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.