Example in Use the reduce Method to Analyze Data

[deividasn93]

Hello,

Can someone explain me example in this tutorial:

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);
// returns { John: 34, Amy: 20, camperCat: 10 }

Tutorial says, that reduce method iterates over each item in an array and returns a single value , but in this example it returns key: value object. I don’t understand, how this function iterates over this example.

Thank You

[gaac510]

A comprehensive explanation of the reduce method can be found here: Array.prototype.reduce() - JavaScript | MDN (mozilla.org)

I think the way to understand the underlying concept of reduce is that, it takes multiple pieces of data of homogenous structures and reduce them into a single result, and that:

• in JS, (because reduce is an array method) said data pieces must be organised so that they each is an element of an array;
• said result can take any form as the coder has defined.

So applying this to your example, the code took three objects (data pieces) each of which contains both a name key and an age key (homogenous structures), and reduced them into an object with key-value pairs representing people and their respective age (single result which takes the form of an object).

[mozahed001]

As far we know the syntax of reduce method is : array.reduce((accumulator, element) => {}, initialValue); Here initialValue is optional.
I think the picture elaboration will resolve your problem.

[Sylvant]

It works exactly how it is explained by the tutorial. Single value can be anything, an array, a number, an object, a string etc. Single value means, you wont return multiple values, e.g. multiple objects, or more than one array etc.
Reduce takes an array and transform it to something completely different(not mandatory), using the values in that array, at least thats what its meant to do, unlike map for example, which takes an array and only modifies its elements, but does return an array with the same count of elements. So when you wanna use the data stored in array and return something, which isnt with this array shape, you use reduce. Its a much more powerful method than map and can achieve the effect of multiple methods combined like map/filter in one loop.
If you look closely in the code example, as last parameter in the reduce method we provide {}, which is an empty object. With that we tell our reduce this is the starting value we want returned, while using the array elements to interact with that value. The parameter called obj is this very {}, which with every iteration will return as its updated state. In the function body you see the code which will be executed with every iteration(with every array element), where we pass the current state of the value we gonna return in the end (obj) and user represents the current array element we work with. On each iteration we put inside the obj a key named after the user name and assign to it the value of its age(obj[user.name] = user.age). In the end we must return the updated obj, for it to be used in the next iteration(or returned by reduce as the final value, if its the last element of the array).

[deividasn93]

Thank You all for answers, but I still can’t fully understand it. Ok, at first iteration function returns empty brackets “{ }”, but what’s happens at second iteration? As I see, it pushes name and age values of first array element in these empty brackets, but I can’t understand meaning of this line:

obj[user.name] = user.age

Why does user.name are in square brackets there, and user.age are not? And why there is obj in this line?

Thank You very much for help!

[deividasn93]

I think, that I already got it: at first it creates empty object, and after that at every iteration it just adds to this object key with name user.name and value with name user.age.

Thank You all for Your help!