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.
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.
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.
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
and flatMap
. 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.
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!
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
.
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.
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!
Top comments (14)
Great write up & explanation, thank you! One possible typo — in your final code example, you say —
However, in the code example that follows, you have —
... shouldn't that be, on the 2nd line —
const entries = Object.fromEntries(arr)
??Thought you'd want to know. But this is great and I learned a lot from both this and your other guide on for...in (Objects) and for...of (Arrays). Keep up the great work!
Thanks for catching that! I’ll take a look.
Thanks for the writeup! Worth noting this is already in Chrome, Firefox, Node 12 but not Edge:
MDN Object.fromEntries
Without it I have been using reduce to make an object from array of key-value pairs... this will be a lot easier!
To no one's surprise, not Edge.
Definitely worth noting! Thanks for that.
Thank you so much for this article! Learned something new today. I think there may be a typo here:
where you said
Object.forEntries
instead ofObject.fromEntries
.Ah, thank you! Will fix that one.
Oddly enough, what I found most helpful was the example of destructuring array arguments during the map, it's not a pattern I see very often in my to see an array containing arrays, but that syntax will be incredibly helpful.
That's great! Glad it helped. I also have a post all about destructuring.
3 Powerful Examples of Destructuring Assignment
Laurie ・ Jun 11 ・ 2 min read
This is fantastic! No more having to use
.reduce
to convert an array back into an Object. 🎉 I know this isn't yet supported in Edge - is there a polyfill for it?So it looks like it might be supported by Edge? At least according to this.
github.com/feross/fromentries
I think they mean the ponyfill is supported in Edge. But maybe not! The wording is kind of ambiguous there.
Agreed.
Great article. I didn't know we could turn an array into an object with this :)