JavaScript Object.fromEntries()

We got Object.entries() which converts an object → array. But what if you want to do the reverse? Wonder no more! Use Object.fromEntries() to array → object 👏

const keyValuePair = [
  ['cow', '🐮'],
  ['pig', '🐷'],
];

Object.fromEntries(keyValuePair);
// { cow: '🐮', pig: '🐷' }

Object.fromEntries 101

Let's just point out the anatomy of an object. An object is something that has a key and a value.

const object = {
  key: 'value',
};

Okay, working with this logic. If we want to convert something to an object, we need to pass something that has those 2 requirements: key and value.

There are two types of arguments that satisfy those requirements:

1. Array with nested Key-Value Pairs
2. Map objects

Array → Object with Object.fromEntries

Here's a nested array with key-value pairs

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
];

And when we apply Object.fromEntries to it, we can obtain our object from it.

Object.fromEntries(nestedArray);

// { key 1: "value 1", key 2: "value 2"}

Map → Object with Object.fromEntries

JavaScript ES6 brought us a new object called map, which is very similar to objects.

TC39: Map objects are collections of key/value pairs where both the keys and values may be arbitrary ECMAScript language values.

To learn more about Map and the differences between it with Object, check out the MDN docs

Let's create our new Map object

// Using the constructor
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
]);

// OR we can use the instance method, "set"
const map = new Map();
map.set('key 1', 'value 1');
map.set('key 2', 'value 2');

// RESULT
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

And now let's convert our map into an object using Object.fromEntries

Object.fromEntries(map);

// { key 1: "value 1", key 2: "value 2"}

TypeError for Object.fromEntries with other types

Be careful when you try to pass other data types into Object.fromEntries. All of this will throw an error 🚨

❌ Uncaught TypeError

Make sure you only pass a key-value pair 👍

Object.fromEntries vs Object.entries

Object.fromEntries reverses the effects of Object.entries. So Object.entries will convert our array and return us a new nested array of key-value pairs. And Object.fromEntries will turn that back to an object.

const object = { key1: 'value1', key2: 'value2' };

const array = Object.entries(object);
// [ ["key1", "value1"], ["key2", "value2"] ]

Object.fromEntries(array);
// { key1: 'value1', key2: 'value2' }

Object to Object Transformation

If you read the original TC39 proposal, this is the reason why this new method was introduced. With the introduction of Object.entries, there was not a simple way to convert the result back into an object.

Often when we choose to use Object.entries, it's because it gives us access to a bunch of nifty array methods, such as filter. But after that conversion, we're kind of stuck with that array.

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };

// 😖 Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "🥦"], ["carrot", "🥕"] ]

Well no more! We can utilize all those useful array methods but still get our object back. Finally, an object to object transformation 👏

const food = { meat: '🥩', broccoli: '🥦', carrot: '🥕' };

// 😄 Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: '🥦', carrot: '🥕' }

Alternative Solutions to Convert Array → Object

Object.fromEntries was introduced in 2019, so it's still quite new. So let's look at other ways we can convert a key-value pair array into an object with better support.

ES6 Reduce to Convert Array → Object

One popular way to convert an array to an object is using reduce.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
    {},
  );
}

toObject(array);
toObject(map);

// RESULT
// { key1: 'value1', key2: 'value2' }

Libraries to Convert Array → Object

The ability to convert key-value pairs to an object is also available in both Underscore and Lodash.

Underscore

_.object

Converts arrays into objects. Pass either a single list of [key, value] pairs, or a list of keys, and a list of values.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

_.object(array);
// { key1: 'value1', key2: 'value2' }

Underscore

_.fromPairs

The inverse of _.toPairs; this method returns an object composed from key-value pairs.

const array = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];

_.fromPairs(array);
// { key1: 'value1', key2: 'value2' }

Browser Support

Except for Internet Explorer, most major browsers have support for this method 👍

• Browser Support: object.fromEntries

Community Input

• @lifeiscontent: be careful with this method, if you have no control over what the data is you're using this method on, if the entries have duplicates you'll lose that data!!

Resources

• MDN Web Docs: Object.fromEntries()
• MDN Web Docs: Object.entries()
• MDN Web Docs: Map vs Object
• ECMAScript Spec
• TC39 Proposal: Object.fromEntries
• Stack Overflow: How to create an object from an Array of key-value pairs?
• Stack Overflow: Convert Array to Object
• Stack Overflow: How to reliably check an object is an EcmaScript 6 Map/Set?
• Stack Overflow: Maps vs Objects in ES6, When to use?
• Stack Overflow: Map vs Object in JavaScript

Thanks for reading ❤
To find more code tidbits, please visit samanthaming.com