Introducing Object.fromEntries
Tags: javascript, webdev, learning, productivity
Published: 2019-07-02 12:13:53

---
title: Introducing Object.fromEntries
published: true
description: We're learning about ES2019 and this entry is all about understanding the Object.fromEntries function.
tags: javascript, webdev, learning, productivity
series: Demystifying ES2019
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x72hcgott1c5zgvwfse9.png
canonical_url: https://tenmilesquare.com/introducing-object-fromentries/
---

I've been loving this series because it gives me the opportunity to really dive into some of these new features.

Today, we're looking at `Object.fromEntries`!

# Let's start with Object.entries

The first thing to know is that in a previous version of ECMAScript, we were introduced to `Object.entries`. This was a nifty function that allowed us to iterate through the keys and values in an object by turning it into an array. 

At its most basic it transformed an object like this.

```javascript
const obj = {a: 1, b: 2, c: 3}
const entries = Object.entries(obj)
// [['a', 1], ['b', 2], ['c', 3]]
```

But a more common use case was to iterate through that result.

```javascript
const obj = {a: 1, b: 2, c: 3}
const entries = Object.entries(obj)

for(const [key, value] of entries) {
    // do something with key and value here
}
```
However, when you used `Object.entries` you'd be stuck with your data in an array. Then along comes `Object.fromEntries`.

# Enter Object.fromEntries

As it turns out, `Object.fromEntries` is just the inverse of `Object.entries`. Take this example.

```javascript
const obj = {a: 1, b: 2, c: 3}
const entries = Object.entries(obj)
const newObj = Object.fromEntries(entries)
// {a: 1, b: 2, c: 3}
```

This example doesn't do anything other than change the data structure back and forth. But with so many helper functions available for arrays, it's easy to see the benefits of being able to do this.

# Why we want this

We have so many wonderful functions that allow us to transform arrays. Things like `map, reduce, filter,` [`flat`](https://dev.to/laurieontech/demystifying-array-prototype-flat-gi9) and [`flatMap`](https://dev.to/laurieontech/understanding-array-prototype-flatmap-56bm). `Object.entries` gave us the ability to use them for objects too. If we transformed our `Object` into an `Array` they were available for use.

```javascript
const obj = {a: 1, b: 2, c: 3}
const result = Object.entries(obj).map(([key, value]) => [key, value * 2]) 
// [['a', 2], ['b', 4], ['c', 6]]
```

But without `Object.fromEntries` we're stuck with our transformation in an `Array` structure. With its addition, we can do this instead!

```javascript
const obj = {a: 1, b: 2, c: 3}
const result = Object.fromEntries(
         Object.entries(obj).map(
            ([key, value]) => [key, value * 2]
         ))
// {a: 2, b: 4, c: 6}
```

# Not just objects

One of the great things about this function is that it works on all iterables. That means you can turn an `Array` into an `Object`, but you can also turn a `Map` into an `Object`.

```javascript
const map = new Map([ ['a', 1], ['b', 2], ['c', 3] ]);
const obj = Object.fromEntries(map);
// {a: 1, b: 2, c: 3}
```

# One thing to watch out for

There is a difference between an `Object` and an `Array` in that the latter does not require unique keys. This means `Object.fromEntries` can cause you to drop information.

```javascript
const arr = [['a', 1], ['a', 2], ['c', 3]]
const entries = Object.fromEntries(arr)
// {a: 2, c: 3}
```

In this example, we've lost the value `1`.

# And that's that

And there we have it! Being able to use all of the array manipulation functions for objects is incredibly useful! And having `Object.fromEntries` closes the loop that `Object.entries` created.

Hope you've enjoyed our ES2019 fun!