Object.entries() and Object.values() methods in JavaScript

The Object.entries() and Object.values() methods were added to the JavaScript object constructor with the release of ECMAScript 2017 (ES8).

Let us have a quick look at these useful methods.

Object.entries() Method

The Object.entries() method takes an object as argument and returns an array with arrays of key-value pairs:

const birds = {
  owl: '🦉',
  eagle: '🦅',
  duck: '🦆'
}

const entries = Object.entries(birds)
console.log(entries)

// [['owl', '🦉'], ['eagle', '🦅'], ['duck', '🦆']]

The order of the array element does not depend on how the object was defined. The order is the same as that provided by a for...in loop.

Iterate over an object

The Object.entries() method can be used to iterate over an object:

// using `for...of` loop
for (const [key, value] of Object.entries(birds)) {
  console.log(`${key}: ${value}`)
}

// owl: 🦉
// eagle: 🦅
// duck: 🦆

// using array destructuring
Object.entries(birds).forEach(([key, value]) => console.log(`${key}: ${value}`))

// owl: 🦉
// eagle: 🦅
// duck: 🦆

Convert an object to a Map

Since the Map constructor takes an iterable to initialize a map object, the Object.entries() method can be used to create a map from an object:

const map = new Map(Object.entries(birds))

console.log(map.size)           // 3
console.log(map.has('owl'))     // true
console.log(map.get('duck'))    // 🦆

Object.values() Method

The Object.values() method, unlike Object.entries(), only returns the values of the own enumerable string-keyed properties in the same order as provided by the for...in loop:

const foods = {
  cake: '🍰',
  pizza: '🍕',
  candy: '🍬',
  icecream: '🍨'
}

const values = Object.values(foods)
console.log(values)

// ['🍰', '🍕', '🍬', '🍨']

Both Object.values() and Object.entries() do not follow the prototype chain and only iterate through the properties directly added to the given object.

They also ignore all non-enumerable properties:

Object.defineProperty(foods, 'sushi', {
  value: '🍣',
  writable: true,
  configurable: true,
  enumerable: false
})

console.log(Object.values(foods))

// ['🍰', '🍕', '🍬', '🍨']

Convert an object to a Set

Since the Set constructor accepts an iterable, with Object.values(), we can easily convert an object to a Set:

const set = new Set(Object.values(foods))

console.log(set.size)       // 4
console.log(set.has('🍨'))  // true

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.