Object.values and Object.entries in JavaScript

To follow along in this tutorial, you should be familiar with JavaScript objects. You can learn more about Javascript objects in our Understanding Objects in JavaScript tutorial.

You should also be comfortable using the JavaScript console in your preferred browser. The examples in this tutorial use the Javascript console in the Chrome web browser.

Object.values() takes an object and returns an array with the values. To demonstrate, open the JavaScript console in your preferred web browser and create an object with the following lines:

const person = {
  firstName: 'James',
  lastName: 'Bond',
  occupation: 'Classified'
};

With an object created, you can retrieve values from your object by using the Object.values() method. You can log the values in the console by passing in your object as an argument into the method:

console.log(Object.values(person));

Output
(3) ['James', 'Bond', 'Classified']

You can also store it in a variable for convenient access to the values:

const personValues = Object.values(person);

personValues;

Output
(3) ['James', 'Bond', 'Classified']

Similar to the Objects.values() method, the Object.entries() method returns a nested array with key-value pairs. Using the previous person object you created, you can output both the key and value by passing in your object as an argument into this method:

const person = {
  firstName: 'James',
  lastName: 'Bond',
  occupation: 'Classified'
};

console.log(Object.entries(person));

Output
(3) [Array(2), Array(2), Array(2)]

Notice that in the console, the values of your key-value pairs aren’t immediately revealed to you. You can reveal the values of the pairs by clicking on the output in your console:

Output
(3) [Array(2), Array(2), Array(2)]
    0: (2) ['firstName', 'James']
    1: (2) ['lastName', 'Bond']
    2: (2) ['occupation', 'Classified']
    length: 3

You can also use a .forEach() loop along with array destructuring to iterate through the key-value pairs to output the values to the console:

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

Output
  firstName: James
  lastName: Bond
  occupation: Classified

With this method, you now know how to access and output key-value pairs to the console.

In this tutorial, you were introduced to two new JavaScript object constructor methods. You can dive deeper into the JavaScript programming language by following our How to Code in JavaScript tutorial series.

If you’d like to learn more about other object methods, read our tutorial on How to Use Object Methods in JavaScript.