How to us Object.entries() and Object.values() methods in JavaScript

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

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

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

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

// 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: 🦆

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

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

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

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

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

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

console.log(Object.values(foods))

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

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

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

See recent articles by JS Nooby

FEATURED

How to Insert an element before another DOM element with JavaScript

Insert an element before another DOM element with JavaScript

FEATURED

How to trigger built-in and custom events using JavaScript

Triggering built-in and custom events using JavaScript

FEATURED

How to remove an event handler in JavaScript

How to remove an event handler in JavaScript

FEATURED

Introduction to Service Workers in JavaScript

Introduction to Service Workers in JavaScript

FEATURED

How to use object & array destructuring in JavaScript

How to use object & array destructuring in JavaScript

FEATURED

How to check if an object is an array in JavaScript

How to check if an object is an array in JavaScript