Functional Programming - Use the reduce Method to Analyze Data

[paldong-creater]

Tell us what’s happening:

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

Can someone please explain why obj[user.name] = user.age is used instead of user[‘name’] : user.age as I can read user.age is being assigned to user.name.

Second, why accumulater ’ {}’ is used since we are not doing any computation and not required any initial value.

Third, please explain this syntax in details as I am confuse now with little knowledge.
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Functional Programming - Use the reduce Method to Analyze Data

Link to the challenge:

freeCodeCamp.org

[WongYC-66]

1. obj['name'] is not same as obj[name] .

obj[John] = user.age;                
obj[Amy] = user.age;
obj[camperCat] = user.age;

will ended up { John: 34, Amy: 20, camperCat: 10 } .

obj['name'] = user.age;                
obj['name']= user.age;
obj['name'] = user.age;

will ended up { name: 10 }

• Passing in a string is not same as passing in a variable.
• If you pass in a variable and this object does NOT have the property, it creates new one for it.
• If you pass in a string, and keep passing the same string, it will replace the previous.

2. accumulater {} is to initialize this obj as empty object.

[paldong-creater]

thanks @WongYC-66

I usually use below syntax to access object inside an array:
users[0][‘name’]=‘xxx’;
console.log(users[0][‘name’]) will output ‘xxx’ instead of 'John.

Can you please explain how obj is use and other syntax to access the object inside an array.

I know we need to use fourth parameter to initialize in reduce method, but why an empty object.

[WongYC-66]

1. if i have an array consist of many objects.

users = [{name:'A', age:10},
         {name:'B', age:20}, 
         {name:'C', age:30}]

I will use either way to access object IN an array :

users[0][‘name’]

users[0].name

But javascript has really convenient array-method to use instead of using forloop to iterate the arrayitem inside such as:

• Array.forEach()

• Array.map()

• Array.reduce()

• Array.filter()

Each of them has different use case. You can read more here > JavaScript Array Iteration
And when you use this Array iteration method, the access to the key of object is easier, like treating normal object:

users.forEach(arrayitem =>{
 console.log(arrayitem.name)
 console.log(arrayitem['name'])
 console.log(arrayitem.age)
 console.log(arrayitem['age'])
})

 Array.reduce((obj, arrayItem) => {
  
  return obj;
}, { });

2. Why an empty object?
   Well , it depends. I think the example just to avoid confusion, so initialize with empty object.
   I understood it like an empty Array. Since i would like to return a new Array, better i initialise it as empty, then push( ) in the result of each iteration.

You can always console.log(obj ) out to see, how obj changes over each iteration.
Seems like a new obj will be returned and replace the old one, and continue to be replaced by next iteration. And eventually return the final obj.

If my concept is wrong, please educate me