Convert an Array to an Object using JavaScript

avatar

Borislav Hadzhiev

Mon Nov 01 20213 min read

banner

Photo by Jez Timms

Convert an Array to Object using JavaScript #

Use the Object.assign() method to convert an array to an object, e.g. const obj = Object.assign({}, arr). The Object.assign method takes a target and source objects as parameters, applies the properties from the sources to the target and returns the result.

index.js
const arr = ['zero', 'one', 'two']; const obj1 = Object.assign({}, arr); console.log(obj1); // ๐Ÿ‘‰๏ธ {0: 'zero', 1: 'one', 2: 'two'}

We passed the following 2 parameters to the Object.assign method:

  1. target object - the object to which we apply the sources' properties
  2. source object(s) - objects containing the properties we want to apply
The method returns an object where the array indexes are applied as keys and the elements in the array are the values.

Convert an Array to Object using Spread #

Use the spread syntax (...) to convert an array to an object, e.g. const obj = {...arr}. The spread syntax will unpack the values of the array into a new object, where the indexes of the array are the object's keys and the elements in the array - the object's values.

index.js
const arr = ['zero', 'one', 'two']; const obj2 = {...arr}; console.log(obj2); // ๐Ÿ‘‰๏ธ {0: 'zero', 1: 'one', 2: 'two'}

We used the spread syntax (...) to unpack the array elements into an object.

The (...) syntax can be used with any iterable, such as an array, string, Set, etc.

Similarly to the first approach, the indexes of the array become the keys and the elements - the object's values.

Convert an Array to Object using forEach #

To convert an array to an object:

  1. Declare a variable and set it to an empty object.
  2. Use the forEach method to iterate over the array.
  3. On each iteration, add the element as a key/value pair to the object.
index.js
const arr = ['zero', 'one', 'two']; const obj3 = {}; arr.forEach((element, index) => { obj3['key' + index] = element; }); // ๐Ÿ‘‡๏ธ๏ธ {'key0': 'zero', 'key1': 'one', 'key2': 'two'} console.log(obj3);

The function we passed to the Array.forEach method gets called with each element in the array.

We also have access to the index of the current iteration, which we use as the key for the new object.

This approach is a bit more manual than the previous two, however it allows you to name the keys of the new object.

Convert an Array to Object using reduce #

To convert an array to an object, use the reduce() method to iterate over the array, passing it an object as the initial value. On each iteration, assign a new key-value pair to the accumulated object and return the result.

index.js
const arr = ['zero', 'one', 'two']; const obj4 = arr.reduce((accumulator, value, index) => { return {...accumulator, [key + index]: value}; }, {}); // ๐Ÿ‘‡๏ธ๏ธ {'key0': 'zero', 'key1': 'one', 'key2': 'two'} console.log(obj4);

The function we passed to the Array.reduce method gets called for each element in the array.

We've set an empty object as the initial value for the accumulator variable.

On each iteration, we assign a new key-value pair to the object and return the value for the accumulator variable.

The final object contains all key-value pairs.

This approach also allows you to assign any key name that your use case requires. We used the string "key" + the index, however you can adjust this as needed.

Convert an Array to Object using Object.fromEntries #

To convert an array of key-value pairs to an object, pass the array to the Object.fromEntries() method, e.g. const obj = Object.fromEntries(arr). The Object.fromEntries method transforms an array of key-value pairs into an object and returns the result.

index.js
const arr2 = [ ['name', 'Tom'], ['age', 30], ]; const obj5 = Object.fromEntries(arr2); console.log(obj5); // ๐Ÿ‘‰๏ธ {name: 'Tom', age: 30}

Notice that we have a two-dimensional array this time. The nested arrays contain 2 elements each - a key and a value.

The Object.fromEntries method takes an iterable such as an array or a Map as a parameter and returns a new object that is constructed by the entries of the iterable.

Conclusion #

There are multiple ways to convert an array to an object:

  1. Using Object.assign() - Object.assign({}, ['a', 'b', 'c']).
  2. Using the spread syntax - {...['a', 'b', 'c']}.
  3. Using the reduce() method.
  4. Using the Object.fromEntries() method.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee