I'm currently learning about the reduce method in JS, and while I have a basic understanding of it, more complex code completely throws me off. I can't seem to wrap my head around how the code is doing what it's doing. Mind you, it's not that the code is wrong, it's that I can't understand it. Here's an example:

const people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    const curGroup = acc[key] ?? [];

    return { ...acc, [key]: [...curGroup, obj] };
  }, {});
}

const groupedPeople = groupBy(people, "age");
console.log(groupedPeople);
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

Now the reduce method as I understand it, takes an array, runs some provided function on all the elements of the array in a sequential manner, and adds the result of every iteration to the accumulator. Easy enough. But the code above seems to do something to the accumulator as well and I can't seem to understand it. What does

acc[key] ?? []

do?

Code like this make it seem like a breeze:

const array1 = [1, 2, 3, 4];

// 0   1   2   3   4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator   currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10

But then I see code like in the first block, I'm completely thrown off. Am I just too dumb or is there something I'm missing???

Can someone please take me through each iteration of the code above while explaining how it does what it does on each turn? Thanks a lot in advance.

CodePudding user response：

That code is building an object in the accumulator, starting with {} (an empty object). Every property in the object will be a group of elements from the array: The property name is the key of the group, and the property value is an array of the elements in the group.

The code const curGroup = acc[key] ?? []; gets the current array for the group acc[key] or, if there isn't one, gets a new blank array. ?? is the "nullish coalescing operator." It evaluates to its first operand if that value isn't null or undefined, or its second operand if the first was null or undefined.

So far, we know that obj[property] determines the key for the object being visited, curGroup is the current array of values for that key (created as necessary).

Then return { ...acc, [key]: [...curGroup, obj] }; uses spread notation to create a new accumulator object that has all of the properties of the current acc (...acc), and then adds or replaces the property with the name in key with a new array containing any previous values that the accumulator had for that key (curGroup) plus the object being visited (obj), since that object is in the group, since we got key from obj[property].

Here's that again, related to the code via comments. I've split out the part creating a new array [...curGroup, obj] from the part creating a new accumulator object for clarity:

function groupBy(objectArray, property) {
    return objectArray.reduce(
        (acc, obj) => {
            // Get the value for the grouping property from this object
            const key = obj[property];

            // Get the known values array for that group, if any, or
            // a blank array if there's no property with the name in
            // `key`.
            const curGroup = acc[key] ?? [];

            // Create a new array of known values, adding this object
            const newGroup = [...curGroup, obj];

            // Create and return a new object with the new array, either
            // adding a new group for `key` or replacing the one that
            // already exists
            return { ...acc, [key]: newGroup };
        },
        /* The starting point, a blank object: */ {}
    );
}

It's worth noting that this code is very much written with functional programming in mind. It uses reduce instead of a loop (when not using reduce, FP usually uses recursion rather than loops) and creates new objects and arrays rather than modifying existing ones.

Outside of functional programming, that code would probably be written very differently, but reduce is designed for functional programming, and this is an example of that.

CodePudding user response：

You are touching on a big problem with reduce. While it is such a nice function, it often favors code that is hard to read, which is why I often end up using other constructs.

Your function groups a number of objects by a property:

const data = [
  {category: 'catA', id: 1}, 
  {category: 'catA', id: 2},
  {category: 'catB', id: 3}
]
console.log(groupBy(data, 'category'))

will give you

{
  catA: [{category: 'catA', id: 1}, {category: 'catA', id: 2}],
  catB: [{category: 'catB', id: 3}]
}

It does that by taking apart the acc object and rebuilding it with the new data in every step:

  objectArray.reduce((acc, obj) => {
    const key = obj[property];        // get the data value (i.e. 'catA')
    const curGroup = acc[key] ?? [];  // get collector from acc or new array 

    // rebuild acc by copying all values, but replace the property stored 
    // in key with the new array
    return { ...acc, [key]: [...curGroup, obj] };
  }, {});

You might want to look at spread operator (...) and coalesce operator (??)

Here is a more readable version:

  objectArray.reduce((groups, entry) => {
    const groupId = entry[property];
    if(!groups[groupId]){
      groups[groupId] = [];
    }
    groups[groupId].push(entry);
    return groups;
  }, {});

This is a good example where I would favor a good old for:

function groupBy(data, keyProperty){
  const groups = {}
  for(const entry of data){
    const groupId = entry[keyProperty];
    if(!groups[groupId]){
      groups[groupId] = [];
    }
    groups[groupId].push(entry);
  }
  return groups;
}

Pretty much the same number of lines, same level of indentation, easier to read, even slightly faster.