Convert JavaScript array into an object using reduce

Convert JavaScript Arrays to Objects using reduce

In this video we will learn how to convert a given array into a JavaScript object using reduce higher order function. If you would like to do a quick refresh on what reduce() method is and how it works, it is covered in How reduce works on JavaScript arrays You may want to watch that first and then work on the code for this problem.

To try out programming problems using reduce() higher order function, here is another post on Programming problems on JavaScript array reduce.

Code


let realEstate = [
    {
        id: '3c5f4c26-f048-11e9-81b4-2a2ae2dbcce4',
        name: 'Vancouver Luxury Apartments',
        price: 450000
    },
    {
        id: '3c5f4e9c-f048-11e9-81b4-2a2ae2dbcce4',
        name: 'Calgary Housing',
        price: 330000
    },
    {
        id: '3c5f52d4-f048-11e9-81b4-2a2ae2dbcce4',
        name: 'AGM Apartments',
        price: 300000
    }
];


function reducer(acc, cur) {
    return {...acc, [cur.id]: cur}
}

let newRealEstate = realEstate.reduce(reducer, {})
console.log(newRealEstate)

Full Transcript

00:00 Hi everyone. It's Deeksha Sharma from bonsaiilabs. Welcome to the JavaScript series. In this video, we will learn how to convert a given array into a JavaScript object using reduce higher order function. If you would like to do a quick refresh on what reduce method is and how it works, I covered that in the previous video. The link is in the description below, so I recommend you watch that first and then work on the code for this problem. So let's start. Here's the problem statement. Let's say we have an array called realEstate containing multiple objects. Each object contains id, name and price for a property. Our goal is to convert this array into an object such that look up happens through the property id. We want our result to look like this. It should be an object containing keys, which are property ids and their value is the property object itself.

00:45 This is pretty common operation. We often need it awards the traversal through an array and perform a fast look up on the data. Now on the same real estate array. Let's write the reducer function separately, which will be passed to the reduce() method. The reducer function is going to accept two arguments, the accumulator and the current element in the array. This reducer function is going to be executed on every element of the array and we would like to return every element as a new object where key is the id and the value is the object itself. Now the spread operator in front of the accumulator just opens up and expands all the data that is inside it and we add to this accumulator a new entry at every iteration where key is the id of the current element and the value is the current element itself.

01:28 Now that reducer function is ready, let's call reduce() on our realEstate array. We will store the results inside newrealEstate and call realEstate.reduce(). Now we pass the first argument as the reducer function that we already implemented above. And the second argument is the initial value, which is going to start from an empty object. And this empty object will be the starting value for the accumulator. We will now log the value for new real estate object using console.log. Now when we run it, we get the realEstate array transformed into an object. This object now contains keys that are property ids and the values that are property objects. I hope these exercises give you an idea on what problems you could potentially solve by using reduce() method on arrays. Thanks for watching this video, and if you have any questions, feel free to drop the comments. You may want to subscribe to this channel if you want to learn fast with these short videos. Until then, my friends keep learning and share your knowledge.