Reduce array of objects to an object in JavaScript
The other day when working with one of the applications, I needed to convert/reduce an array of objects to an object.
Here’s the array that I wanted to reduce.
const ethnicities = [
{
id: 1,
name: 'Asian'
},
{
id: 2,
name: 'African'
},
{
id: 3,
name: 'Caucasian'
}
]
Now, I wanted to convert this to an object where the id of individual array objects would be the key and name would be the value. That’s because I wanted to use the end object as a lookup table based on the id.
To achieve this, I used the Array.reduce() method like so.
const ethnicitiesObject = ethnicities.reduce(
(previousObject, currentObject) => {
return Object.assign(previousObject, {
[currentObject.id]: currentObject.name
})
},
{});
console.log(ethnicitiesObject);
// { 1: 'Asian', 2: 'African', 3: 'Caucasian' }
As you can tell, by using the Array.reduce() method, we can reduce the array to an object by initializing the reducer using an empty object ({}) as the second argument of Array.reduce().
And then in the reducer callback, we can work our way up to build the object using the Object.assign() method like how we initially wanted as an end result.
👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I do and want me to continue doing the same, I'd like you consider leaving a tip. I'd highly appreciate that. Cheers!
