Blog

To convert an array to object in JavaScript, you can use any of the following methods –

1. Use the Object.assign() method
2. Use the Array.reduce() method
3. Use the Array.forEach() method
4. Use the Array.map() method
5. Use {…arr} method
6. Use Object.fromEntries() method

Let’s look at each of these methods in detail below –

Convert An Array To Object In JavaScript

Use the Object.assign() method

The Object.assign() is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

Syntax: Object.assign(target, …sources)

Parameters:

target: It is the target object.

sources: It is the source object(s).

Example 1: In this example, we are converting an array to an object using the Object.assign() method.

const arr = [‘a’, ‘b’, ‘c’];

const obj = Object.assign({}, arr);

console.log(obj); // outputs {0: "a", 1: "b", 2: "c"}

In the above code, we first created an array arr. We then assigned the values of this array to a new object obj using Object.assign(). The output of the code shows that all the values of arr have now been copied over to obj, and obj is now an object with three key-value pairs.

Use the Array.reduce() method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The reducer function takes two arguments – accumulator (acc) and current value (curr). The accumulator is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied. The current value is the current element being processed in the array.

Syntax: arr.reduce(callback(accumulator, currentValue, currentIndex, array ), initialValue)

Parameters:

callback: It is the function to execute on each element in the array.

accumulator: It is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied.

currentValue: It is the current element being processed in the array.

currentIndex: It is the index of the current element being processed in the array.

array: It is the array reduce was called upon.

initialValue: It is the value used as the first argument to the first call of the callback function.

Example: In this example, we are converting an array to an object using the reduce() method, with object keys as indices of the array and object values as the array values.

const arr = [‘a’, ‘b’, ‘c’];

const obj = arr.reduce((acc, curr, idx) => {

  acc[‘key’ + idx] = curr;

  return acc;

}, {});

console.log(obj); // outputs {key0: "a", key1: "b", key2: "c"}

In the above code, we first created an array arr. We then used the reduce() method to convert this array into an object, with the object keys equal to the indices of the array and object values equal to the values of the array. The output of the code shows that the array has been successfully converted into an object.

Use the Array.forEach() method

The forEach() method executes a provided function once for each array element. It does not return anything.

Syntax: arr.forEach(callback(currentValue, currentIndex, array))

Parameters:

callback: It is the function to execute on each element in the array.

currentValue: It is the current element being processed in the array.

currentIndex: It is the index of the current element being processed in the array.

array: It is the array forEach was called upon.

Example: In this example, we are converting an array to an object using the forEach() method, with object keys as indices of the array and object values as the array values.

const arr = [‘a’, ‘b’, ‘c’];

const obj = {};

arr.forEach((curr, idx) => {

  obj[‘key’ + idx] = curr;

});

console.log(obj); // outputs {key0: "a", key1: "b", key2: "c"}

In the above code, we first created an array arr. We then used the forEach() method to convert this array into an object, with the object keys equal to the indices of the array and object values equal to the values of the array. The output of the code shows that the array has been successfully converted into an object.

Use the {…arr} spread operator

The spread operator allows an array to be expanded in places where multiple arguments (for function calls) or multiple elements (for arrays) are expected.

Syntax: {…arr}

Parameters: arr:

It is the array to be converted into an object.

Example: In this example, we are converting an array to an object using the {…arr} spread operator, with object keys as indices of the array and object values as the array values.

const arr = [‘a’, ‘b’, ‘c’];

const obj = {...arr};

console.log(obj); // outputs { 0: "a", 1: "b", 2: "c" }

In the above code, we first created an array arr. We then used the {…arr} spread operator to convert this array into an object, with the object keys equal to the indices of the array and object values equal to the values of the array. The output of the code shows that the array has been successfully converted into an object.

Use The Object.fromEntries() method

The Object.fromEntries() method transforms a list of key-value pairs into an object.

Syntax: Object.fromEntries(iterable)

Parameters: iterable

It is the Array or other iterable object whose elements are key-value pairs.

Example: Here is an example of converting an array that has key-value pairs to an object using the Object.fromEntries() method.

const entries = [[‘a’, 1], [‘b’, 2], [‘c’, 3]];

const obj = Object.fromEntries(entries);

console.log(obj); // outputs { a: 1, b: 2, c: 3 }

In the above code, we first created an array entries that has key-value pairs. We then used the Object.fromEntries() method to convert this array into an object. The output of the code shows that the array has been successfully converted into an object.

Conclusion – Convert An Array To Object In JavaScript

As you can see, there are several ways to convert an array to object in JavaScript. Depending on your needs, you can choose the most appropriate method for your situation.

I hope this article has helped you learn how to convert an array to object in JavaScript. If you have any questions or comments, please feel free to leave them below. Thanks for reading!