Convert an Array to an Object using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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 keys are the array indexes and the values are the array elements.

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.

The method also gives us access to the index of the current iteration.

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

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 object's keys and the elements become the object's values.

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 with each element in the array.

We 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.

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 #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.