Object.entries() and Object.values() Methods in JavaScript
Tags: webdev, javascript, codenewbie, beginners
Published: 2019-08-22 16:21:29

*This post was originally published on [attacomsian.com/blog](https://attacomsian.com/blog/object-entries-values-javascript).*

---

The `Object.entries()` and `Object.values()` methods were introduced to 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:

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

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

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

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

### Iterating through an Object

We can use `Object.entries()` to iterate over object as well:

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


### Converting an Object to a Map

Since the [Map constructor](https://attacomsian.com/blog/maps-javascript#initialize-a-map) also takes an iterable of `entries` to initialize a map object, the `Object.entries()` method can be used to create a map from an object:

```java
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 works very much like `Object.entries()`, but only returns the values of the own enumerable string-keyed properties in the same order as provided by the `for...in` loop:

```javascript
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 that are directly added to the given object. They also ignore all non-enumerable properties as well:

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

console.log(Object.values(foods));

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

### Converting an Object to Set

Since the [Set constructor](https://attacomsian.com/blog/sets-javascript#initialize-a-set) accepts an iterable, with `Object.values()`, we can easily convert an `Object` to a `Set`:

```javascript
const set = new Set(Object.values(foods));

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

---

✌️ I write about **modern JavaScript, Node.js, Spring Boot**, and all things **web development**. [**Subscribe to my newsletter**](https://attacomsian.com/newsletter) to get web development tutorials & protips every week.

---

**Like this article?** [Follow @attacomsian on Twitter](https://twitter.com/attacomsian). You can also follow me on [LinkedIn](https://linkedin.com/in/attacomsian) and [DEV](https://dev.to/attacomsian).