How to convert an array to an object in JavaScript

published: 10 Sep 2022

2 min read

How to convert an array to an object in JavaScript

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

  1. Using the Object.assign() method to convert an array to an object ,e.g. const obj = Object.assign({}, arr).
  2. Using the spread syntax (...) to convert an array to an object, e.g. const obj = {...arr}.
  3. Using the Array.forEach() method to iterate over all items and add them as a key-value pair to an object.
  4. Using the Object.fromEntries() method to convert an array of key-value pairs to an object, e.g. const obj = Object.fromEntries(arr).

Object.assign() Method

The Object.assign() method was introduced in ES6, and it copies the values of all enumerable own properties from one or more source objects to a target object. It has the following syntax:

Object.assign(target, ...sources)

The target object is the first argument and is also used as the return value. The following example demonstrates how you can use the Object.assign() method to convert an array to an object:

const names = ['Alex', 'Bob', 'Johny', 'Atta']

const obj = Object.assign({}, names)

console.log(obj)
// { '0': 'Alex', '1': 'Bob', '2': 'Johny', '3': 'Atta' }

Read this guide to learn more about the Object.assign() method.

Spread Operator

Another way to convert an array to an object is by using the object spread ({... iterable}) operator. Here is an example:

const names = ['Alex', 'Bob', 'Johny', 'Atta']

const obj = { ...names }

console.log(obj)
// { '0': 'Alex', '1': 'Bob', '2': 'Johny', '3': 'Atta' }

Array.forEach() Method

To use Array.forEach() method to convert an array to an object:

  1. Declare an empty object as a variable.
  2. Use the Array.forEach() method to iterate over the array elements.
  3. In each iteration, add the element as a key-value pair to the object.
const names = ['Alex', 'Bob', 'Johny', 'Atta']

const obj = {}

names.forEach((elem, i) => {
  obj[i] = elem
})

console.log(obj)
// { 0: 'Alex', 1: 'Bob', 2: 'Johny', 3: 'Atta' }

Unlike the above methods, the Array.forEach() method allows you to name the keys of the new object.

names.forEach((elem, i) => {
  obj['key${i}'] = elem
})

console.log(obj)
// { key0: 'Alex', key1: 'Bob', key2: 'Johny', key3: 'Atta' }

You can also add a function to Array's prototype and call it whenever you want to convert an array into an object:

Array.prototype.toObject = function () {
  const obj = {}

  this.forEach((elem, i) => {
    obj[i] = elem
  })

  return obj
}

const newObj = ['Alex', 'Bob', 'Johny', 'Atta'].toObject()

console.log(newObj)
// { '0': 'Alex', '1': 'Bob', '2': 'Johny', '3': 'Atta' }

Object.fromEntries() Method

The Object.fromEntries() method converts an array of key-value pairs into an object and returns the result, as shown below:

const props = [
  ['name', 'John Doe'],
  ['age', 29]
]

const obj = Object.fromEntries(props)

console.log(obj)
// { name: 'John Doe', age: 29 }

Notice the nested arrays we used this time. These two-dimensional arrays contain at least two elements - a key and a value.

How to convert an array to an object in JavaScript | Coding Tips And Tricks

Are we missing something?  Help us improve this article. Reach out to us.

Are you looking for other code tips?

Check out what's on in the category: javascript, programming
Check out what's on in the tag: javascript, programming, array