How to convert an Array to an Object using JavaScript

Convert an Array to Object using JavaScript

Use the Object.assign() method to convert an array to an object. This method copies all enumerable own properties from one or more source objects to a target object, returning the modified target object. e.g. const returnedTarget = Object.assign(target, source);

const theArray = ['Hello', 'World', 'Matt'];

const theObject = Object.assign({}, theArray);
console.log(theObject);
Object.assign() method to convert an array to an object.
Object.assign() method to convert an array to an object.


Explanation-

Object.assign(target, ...sources)
In this example we passed the following two parameters to the Object.assign method:

  1. target – object to which we apply the sources’ properties.
  2. sources – objects containing the properties we want to apply.

ℹ️ The method returns an object with the array indexes as keys and the array elements as values.

Convert an Array to Object using forEach()

To convert an array to an object using forEach():

  1. Create an empty object.
  2. Use the forEach() method iterate over an array.
  3. On each iteration, add the element to the object as a key/value pair.

const theArray = ['zero', 'one', 'two'];
const theObject = {};

theArray.forEach((element, index) => {
  theObject['key' + index] = element;
});

console.log(theObject);
Convert an Array to Object using forEach()
Convert an Array to Object using forEach()

The function we passed to the Array.forEach() method is called once for each element in the array.

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

ℹ️ With this approach, you have to do a bit more work yourself, but it allows you to name the keys of the new object.

Convert an Array to Object using Spread syntax

Use the spread syntax (…) to convert an array into an object. The spread syntax will take the values in the array and spread them out into a new object. The indexes of the array will become the object’s keys, and the elements in the array will become the object’s values.

const theArray = ['zero', 'one', 'two'];

const theObject = {...theArray};
console.log(theObject);
Convert an Array to Object using Spread syntax
Convert an Array to Object using Spread syntax

We used the spread syntax (…) to unpack the array elements and store them in an object.

ℹ️ The spread syntax (…) allows you to iterate over any iterable, such as an array, string, Set, etc.

Convert an Array to Object using reduce

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

Example code –

const theArray = ['zero', 'one', 'two'];

const theObject = theArray.reduce((accumulator, value, index) => {
  return {...accumulator, ['key' + index]: value};
}, {});

console.log(theObject);
Convert an Array to Object using reduce() method.
Convert an Array to Object using reduce() method.


The function that we pass into the Array.reduce method will be called once for each element in the array.

We initialize the accumulator variable with an empty object.
We assign a new key-value pair to the object on each iteration and return the value for the accumulator variable.

This approach 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, use the Object.fromEntries() method. e.g. const theObject = Object.fromEntries(theArray).

const theArray = [
  ['name', 'Matt'],
  ['age', 30],
];

const theObject = Object.fromEntries(theArray);

console.log(theObject);
05. Convert an Array to Object using Object.fromEntries
Convert an Array to Object using Object.fromEntries()

In this example theArray is a multidimensional array. Each of the nested arrays contains two elements: a key and a value.

ℹ️ The Object.fromEntries() method creates a new object from an iterable such as an array or a Map.

How to Convert an Array to an Object using JavaScript.

Summation

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

  1. Use the .reduce() method to convert an array to an object.
  2. Use the Object.assign() method to convert an array to an object. e.g. Object.assign({}, ['array', 'to', 'Object']).
  3. Use the spread syntax (…) method to convert an array to an object. e.g. {...['Array', 'to', 'Object']}.
  4. Use the Object.fromEntries() method to convert an array to an object. e.g. Object.fromEntries(arrayToObject);