Javascript - Grouping function with reduce method

Question

Can someone explains step by step the following function? I lost it when the body of the reduce begins:

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

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    let key = obj[property]
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {})
}

let groupedPeople = groupBy(people, 'age')

how about putting console.log everywhere and tracking what the code does? — grodzi
– grodzi, Commented Feb 23, 2020 at 17:38
@grodzi - Or, rather than stumbling around in the dark with a console.log torch, he could turn on the lights using the debugger built into his IDE or browser. — T.J. Crowder
– T.J. Crowder, Commented Feb 23, 2020 at 17:39
@T.J. Crowder , thank you sir for your answer. If you want it you can answer my question with the solution you already provided, please. — Pedro Relvas
– Pedro Relvas, Commented Feb 23, 2020 at 17:53

T.J. Crowder · Accepted Answer · 2023-01-20 16:16:49Z

reduce makes that function more complex-seeming than it actually is. (reduce is hugely overused, and almost always the wrong tool vs. a simple loop unless you're doing functional programming with predefined, reusable reducer functions.) Here's the same function without the unnecessary reduce, with explanation:

function groupBy(objectArray, property) {
  // The object we'll return with properties for the groups
  let result = {}
  // Loop through the array
  for (const obj of objectArray) {
    // Get the key value
    let key = obj[property]
    // If the result doesn't have an entry for that yet, create one
    if (!result[key]) {
      result[key] = []
    }
    // Add this entry to that entry
    result[key].push(obj)
  }
  // Return the grouped result
  return result
}

The reduce version just passes result around (as acc): reduce calls the callback with the initial value (the {} you see near the end of the reduce call) and the first entry, which the callback receives as acc and obj. Then the callback does one entry's work and returns acc, which means it receives it again on the next pass.

Collectives™ on Stack Overflow

Javascript - Grouping function with reduce method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related