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:
- Using the
Object.assign()method to convert an array to an object ,e.g.const obj = Object.assign({}, arr). - Using the spread syntax (
...) to convert an array to an object, e.g.const obj = {...arr}. - Using the
Array.forEach()method to iterate over all items and add them as a key-value pair to an object. - 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:
- Declare an empty object as a variable.
- Use the
Array.forEach()method to iterate over the array elements. - 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.
Are we missing something? Help us improve this article. Reach out to us.
How to convert an array to an object in JavaScript
There are four ways to convert an array to an object in JavaScript:
- Using the
Object.assign()method to convert an array to an object ,e.g.const obj = Object.assign({}, arr). - Using the spread syntax (
...) to convert an array to an object, e.g.const obj = {...arr}. - Using the
Array.forEach()method to iterate over all items and add them as a key-value pair to an object. - 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:
- Declare an empty object as a variable.
- Use the
Array.forEach()method to iterate over the array elements. - 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.
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
