// Tutorial //

Object.values and Object.entries in JavaScript

Published on July 12, 2017 · Updated on May 26, 2022
Default avatar
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']

Note: Object.values() doesn’t follow the prototype chain and only iterates over the values that are directly in the provided object. It does not return non-enumerable values like functions.

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Kong Yang

author

Associate Technical Writer

Associate Technical Writer @ DigitalOcean


Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!