How to Use JavaScript Array Reduce Method to Group and Convert Array into Object

In this blog post, we will explore how to use the JavaScript array reduce method to group and convert an array into an object. This technique can be useful when working with arrays and needing to manipulate the data in a more organized way. We will provide a code snippet and explain the step-by-step process with examples.

Code

var arr = [
  {
    id: 1,
    name: 'sadf'
  },
  {
    id: 2,
    name: 'cvb'
  },
  {
    id: 3,
    name: 'kl'
  }
]

const obj = arr.reduce( (prev,next) => {
  // grab the id from item
  const { id } = next
  
  // add the item to our object
  prev[id] = next
  
  // return the object so we can add more items
  return prev
}, {});

obj

var gg = arr.reduce( (prev, next) => {
  // grab the property from the item that we want to group by
  const {name} = next;
  
  // add a new array to the object if this is the first one with this value
  if (prev[name] === undefined) {
    prev[name] = [];
  }
  
  prev[name].push(next);
  
  return prev;
}, {})

gg

Code Explanation

The provided code snippet demonstrates two use cases of the reduce method on an array. Let’s go through each one separately.

1. Converting Array into Object:

The first part of the code shows how to convert an array into an object using the reduce method. The array arr contains objects with id and name properties. By using reduce, we can convert this array into an object where each item is referenced by its id. Here’s how it works:

javascript
const obj = arr.reduce((prev, next) => {
  const { id } = next;
  prev[id] = next;
  return prev;
}, {});

console.log(obj);

In this code, the reduce method takes in a callback function (prev, next) and an initial value {}. On each iteration, the callback function assigns the current object to the id property of the prev object. Finally, the obj variable holds the converted object.

2. Grouping Array into Object by Property:

The second part of the code demonstrates how to group an array of objects based on a common property. The reduce method can be used to create an object with properties as the grouped values. Here’s an example:

javascript

const gg = arr.reduce((prev, next) => {

const { name } = next;

if (prev[name] === undefined) {

prev[name] = [];

}

prev[name].push(next);

return prev;

}, {});

console.log(gg);

In this code, we use reduce to iterate through each object in the array arr. For each object, we extract the name value and check if it exists as a property in the prev object. If not, we create a new empty array. Then, we push the current object into the corresponding array property. Finally, the gg variable holds the grouped object.

Conclusion

By using the JavaScript array `reduce` method, you can conveniently convert an array into an object and group elements based on specific properties. This technique provides a more organized and efficient way of working with array data. We hope this blog post has been informative and helpful in expanding your JavaScript knowledge.

Remember to practice and experiment with different scenarios to enhance your understanding of array manipulation using the `reduce` method. Happy coding!

Also checkout the following codes.

Program to Generate Fibonacci Sequence using a Generator Function in JavaScript
“Program to Generate Random Numbers in JavaScript”