Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Array Iteration Methods Combining Array Methods Working with Objects in Arrays

Scott Wells
Scott Wells
8,715 Points

I though .reduce(); made a new array, not a new object?

In a previous video, he taught us that ".reduce();" uses two parameters, with the initial accumulator value defaulting to the first element in the array...

users.reduce((usersObject, user) => {});

...but he adds curly brackets to his code, and I'm not sure what it does.

const newUsersObject = users.reduce((usersObject, user) => {
  usersObject[user.name] = user.age;
}, {});

Does this create a new object? If so, how? I thought it just referenced the array?

And also, I'm not sure what's happening in the callback function. Why is "usersObject" next to "user.name" in brackets?

1 Answer

Dave StSomeWhere
Dave StSomeWhere
19,822 Points

Hey Scott, best first place to start is with the MDN reduce documentation.

Please refer to the docs for the available (mandatory and optional parameters) - hopefully that and the description below will answer your question. It also provides a good walkthrough of what happens inside the reduce().

Let's look into why the curly braces at the end and the object/brackets question...

Here's basically the same code with some different names and also including the needed return. Hopefully the comments explain what you are asking. Just let me know if more detail is needed.

Hope this makes sense:

const users = [
    {name: 'Samir', age: 22},
    {name: 'Angela', age: 32},
    {name: 'Beatrice', age: 42}
];
/*
    create a new variable called usersObject
    groupOfUsers is the accumulator
    groupOfUsers is initialized as an object (curly braces at end)
    userInstance is the individual entry in the users array that is looped through
    groupOfUsers[userInstance.name] is creating a new object key for each name
    userInstance.age is the value being assigned to the new object key each time
    return groupOfUsers puts each object entry (each time through the loop) into usersObject
*/
const usersObject = users.reduce((groupOfUsers, userInstance) => {
    groupOfUsers[userInstance.name] = userInstance.age;
    return groupOfUsers
}, {}); // the curly braces is the initial value of an empty object

console.log(usersObject); // show what we created in the console

// console output
{ Samir: 22, Angela: 32, Beatrice: 42 }