Functional Programming, Reduce Method Example Problem

Hello, I’m struggling to fully grasp final the example given in this lesson.

const users = [
  { name: 'John', age: 34 },
  { name: 'Amy', age: 20 },
  { name: 'camperCat', age: 10 }
];

const usersObj = users.reduce((obj, user) => {
  obj[user.name] = user.age;
  return obj;
}, {});
console.log(usersObj); // { John: 34, Amy: 20, camperCat: 10 }

Specifically:

  1. Can you confirm that “obj” is the accumulator?
  2. Can you confirm that “user” is the element (currentValue) being processed?
  3. If “obj” is the accumulator, I’m uncertain how it’s being used here obj[user.name]. Because to me, that looks like an object’s key is being set.
  4. In addition, I find that whole like appears to be the declaration of a key/value pair for an object.
  5. Finally, at the end there it has a {} being passed in as what appears to be the index parameter of the reduce function. That seems super odd to me based on my understanding of an index (the key in an array).

Can anyone chime in and set me straight? I have a feeling I’m way off here…

Here is how I understand it:

The {} is the second parameter of .reduce that sets the initial value for the accumulator…

Yes, “obj” is the accumulator and starts as an empty object {} from above.

Yes, user is the current Element and you are correct, it is creating object keys.

Obj starts empty {} … and it starts with the 1st user and creates a new key/value pair; { John: 34 }

Then it creates the next pair, { John: 34, Amy: 20} … and so on.

1 Like

If you run this code, you can see what’s happening:

const users = [
  { name: 'John', age: 34 },
  { name: 'Amy', age: 20 },
];

const usersObj = users.reduce((obj, user) => {
  console.log(obj)
  obj[user.name] = user.age;
  console.log(obj)
  return obj;
}, {});

// {}                    => 1st element: at first, this is an empty object, because of the empty {} as 2nd argument of reduce
// { John: 34 }          => 1st element: user.name and user.age got added to obj
// { John: 34 }          => 2nd element: this is obj before doing something
// { John: 34, Amy: 20 } => 2nd element: user.name and user.age got added to obj
1 Like

Thanks for the explanation! That really helped me understand the components. And then running through it as @miku86 suggested crystallized it in my mind.

The parameters from MDN are:

1. accumulator
2. currentValue
3. index (optional)
4. array (optional)
5. initialValue (optional)

The parameters as used in the exercise in my initial question are:

1. accumulator = obj
2. currentValue = user
3. index = //this is not set
4. array = //this is not set
5. initialValue = {} //an empty object
  • When the code is running, obj is first declared as an empty object by the initialValue.
  • Then obj has its first property passed in as John: 34.
  • This value is returned on the next line, but because .reduce uses a callback function, it continues iterating through the users array.
  • Next Amy: 20 is added on to obj and so on until the end of the array whereupon the value of obj is assigned to usersObj and console logged.

In case anyone else reading this was wondering why/how obj[user.name] = user.age; avoids overwriting itself, that is done by setting an object property using the bracket notation.