Introduction to Object.fromEntries

It’s the beginning of the year, but I can feel the fire already. Great features arrived in the hood!

1. What’s on the plate today?

We’re going to talk about Object.fromEntries, a new feature that has been shipped in Mozilla Firefox, but is coming to Chrome 73 and Opera as well. There are signs that it’s going to be shipped in Safari as the official status is “In development”. As of now, the Edge team have shown an interest, and they are also going to develop it in the future, hopefully.

2. Who is the author of the proposal?

It is worth to mention and support people who have fantastic ideas and help to make JavaScript better. The author of the proposal is Darien Maillet Valentine.

3. What is the purpose of the feature?

To answer this question, we have to come back to the past and take a look at the Object.entries feature. As you probably know, Object.entries transform our object to an array of properties. Each key and its value have a separate array, where is placed, the original key and the value as a separate record in an array. If we use, Object.fromEntries on this array, it brings our object back to where it was before – that’s the primary purpose and use case of this feature.

4. Usage examples.

Example:

const obj = { name: ‘Vanessa’, age: 156, showNumber: 21 };
Object.entries(obj)  // Result: [Array(2), Array(2), Array(2)] 

Array inside:

0: [“name”, “Vanessa”],
1: [“age”, 156],
2: [“showNumber”, 21]

Excellent stuff! Much work can be done by using it. We’ve got Object.fromEntries which is a reversal way of turning transformed object to an array back to an object again. Let me show it to you so that you can understand it in a better way.

Our current array:

0: [“name”, “Vanessa”],
1: [“age”, 156],
2: [“showNumber”, 21]

Will be transformed by Object.fromEntries to:

{ name: ‘Vanessa’, age: 156, showNumber: 21 };

This feature was missed by developers, because there was no other easy way of turning it back to the previous state from an array, until now. It’s not the only use case; you can use it on maps as well. Take a look at the example below.

Example:

const mapOne = new Map();
mapOne.set(“name”, “Vanessa”) // { “name” => “Vanessa” }
Object.fromEntries(mapOne); // { name: “Vanessa” }

5. Summary

This method is an excellent way of speeding up the development process and soon, once Chrome 73 is released, you’re going to be able to use it, without any polyfills. Let’s wait, and once it arrives, enjoy it.

Thanks for reading this blog post. If you can share this blog post, I'd be much appreciated.