Tutorial

Object.values and Object.entries in JavaScript

JavaScript

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

With ES2017 (ES8), the Object constructor gets two new useful methods: Object.values and Object.entries. Let’s go over their use really quickly.

Object.values

Object.values takes an object and returns an array with the values, in the same order that a for…in loop would give us. For example:

const myObj = {
  piggy: '🐷',
  birdy: '🐦',
  bunny: '🐰'
};

const myValues = Object.values(myObj); // ["🐷", "🐦", "🐰"]

Object.values doesn’t follow the prototype chain and only iterates over the value that are directly on the provided object. It won’t return any non-enumerable values either, as can be seen in this example:

const myObj = {
  piggy: '🐷',
  birdy: '🐦',
  bunny: '🐰'
};

Object.defineProperty(myObj, 'koala', {
  value: '🐨',
  writable: true,
  configurable: true,
  enumerable: true
});

let myValues = Object.values(myObj);  // ["🐷", "🐦", "🐰", "🐨"]

Object.defineProperty(myObj, 'koala', {
  value: '🐨',
  writable: true,
  configurable: true,
  enumerable: false
});

myValues = Object.values(myObj); // ["🐷", "🐦", "🐰"]

Object.entries

Very similar to the previous method, Object.entries returns an array with arrays of key-value pairs:

const moreAnimals = {
  camel: '🐫',
  boar: 'πŸ—',
  turkey: 'πŸ¦ƒ'
};

const entries = Object.entries(moreAnimals);
// [['camel','🐫'],['boar','πŸ—'],['turkey','πŸ¦ƒ']]

Since the new map object type can be initialized using an array of the shape that Object.entries gives us, it’s now very easy to create a map from an object:

const moreAnimals = {
  camel: '🐫',
  boar: 'πŸ—',
  turkey: 'πŸ¦ƒ'
};

const animalsMap = new Map(Object.entries(moreAnimals));

console.log(animalsMap.size); // 3
console.log(animalsMap.has('turkey')); // true
console.log(animalsMap.get('camel')); // '🐫'

0 Comments

Creative Commons License