Use the reduce Method

Hello,
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data

Following this code:

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);

I don’t understand this:

obj[user.name] = user.age;

If I want to have acces to ‘Jhon’, I have to make:

users[0].name

Thus instead of

obj[user.name] = user.age;

I would tend to write:

obj[user].name = user.age

I think I forgotten one lesson to well understand this. Could you please explain me what I don’t understand or indicate me which lesson I have to study again ?

If user is { name: 'Alice', age: 23 }, then that would add/change the key/value pair or { Alice: 23 } to the object obj.

What is obj[user]. Isn’t user an object? We usually use strings to index objects.

If I do:

const obj = { Bob: 24, Carol: 25 };
const user = { name: 'Alice', age: 23 };

obj[user].name = user.age;

Then I get an error:

TypeError: Cannot set properties of undefined (setting ‘name’)

The issue is that to find obj[user].name it first has to find obj[user], but that is undefined. We get the error because only reference types/objects can have properties.

If we change it a little:

const obj = { Bob: 24, Carol: 25 };
const user = { name: 'Alice', age: 23 };

obj[user] = user.age;

console.log(JSON.stringify(obj, null, 2));
// {
//   "Bob": 24,
//   "Carol": 25,
//   "[object Object]": 23
// }

We see that it does try to save that property. It must run the toString method and gets that back. This would be a very bad idea.


Does that makes sense? Can you see the difference?

:rofl:
Sorry but I understand nearly nothing.
In addition I m not american / english so … :stuck_out_tongue_closed_eyes:

Maye be could you stay with one object ?
I don’t know “stringify”.

I think that perhaps you are misunderstanding the arguments to the callback function for reduce. What are the two arguments?

The first argument is the accumulator:
“obj” is the acumulator object. What will contain the result.

The second is the current element:
The “user” :

{ name: 'John', age: 34 }

or

{ name: 'Amy', age: 20 }

or

{ name: 'camperCat', age: 10 }

Right, so inside of here obj is a brand new object. It is not any of the objects in this array.

obj = [
      user 1  {
              'John': 34
             },
      user 2  {
              'John':  34
             } 
           ....  
            

Where did this object come from? What are you asking about this object?

The result from the example code looks like this:

{
  John: 34,
  Amy: 20,
  camperCat: 10
}

How to write that without “destructuring syntaxe” ?

without arrow function ?

I don’t see any ‘destructuring syntax’ here.

Writing without an arrow function is a completely different thing.

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);

is the same as

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

function myCallabck(obj, user) {
  obj[user.name] = user.age;
  return obj;
}

const usersObj = users.reduce(myCallback, {});
console.log(usersObj);

or if you want even more verbose

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

function myCallabck(obj, user) {
  const userName = user.name;
  const userAge = user.arg;
  obj[userName] = userAge;
  return obj;
}

const usersObj = users.reduce(myCallback, {});
console.log(usersObj);
obj[userName]...

???
For the first time, I am lost. I can’t make a connection with the lessons.

This is a commonly forgotten lesson:

1 Like

Yes, I made the connection now. Really thanks :wink:
Good nigth.
See you tomorrow maybe.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.