Object.values and Object.entries in JavaScript

Introduction

The JavaScript programming language continues to evolve and add new features with each iteration. In JavaScript 2017 (ES8) the object constructor includes two new methods: Object.values() and Object.entries(). This tutorial is a primer on these two methods.

Prerequisites

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.

Using the Object.values() Method

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']

Using the Object.entries() Method

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.

Conclusion

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.