Tutorial

Object.values and Object.entries in JavaScript

Updated on May 26, 2022
Default avatar

By Alligator.io and Kong Yang

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author


Default avatar
Kong Yang

author


Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel