Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Asynchronous Programming with JavaScript Understanding Promises Using Fetch

Posted by gerardo keys
gerardo keys
14,292 Points

Can you explain a little more how this code part works?

return {...profile, craft};

I do understand how a spread operator operator works but don't really understand this simplified way of creating an object. Doesn't an object need a key-value pair? All I can see here is that you are creating an object with an array of the profile objects and another property I'm assuming is a reference to person.craft. I don't understand how this becomes an object and especially how its getting the person.craft property with just using craft...

2 Answers

Steven Parker
Steven Parker
229,788 Points
Steven Parker
Steven Parker
229,788 Points

The spread operator expands the "profile" object into key/value pairs. Then the braces around the expression enclose those key/value pairs into a new object, including the additional property "craft".

And "craft" is a shorthand notation used for object literals. When the variable name is the same as the key, then the key need not be explicitly specified.

gerardo keys
gerardo keys
14,292 Points

Ok im starting to get it now, I misunderstood the spread operator, I thought it only spread into arrays. Knowing that you can also use the shorthand for adding properties also made it easier to understand now. Thank you for the explanation!

ALMEKDAD ALMUHAMMAD
ALMEKDAD ALMUHAMMAD
Courses Plus Student 10,947 Points

Steven Parker, please I did not understand that. could you please describe that in another way. what is "profile" and why we added it after ... and then we put "craft"??

Steven Parker
Steven Parker
229,788 Points
Steven Parker
Steven Parker
229,788 Points

The example is from line 12 seen in the video about 5 minutes in. The "profile" is the parameter passed to the function (by the call to "then" on line 11) which contains the decoded response from the previous "then". And "craft" is a local variable created on line 8. So this line joins them together to create a larger object.

Brian Wright
Brian Wright
6,770 Points
Brian Wright
Brian Wright
6,770 Points

The craft variable added is a shorthand way of writing { craft: craft}. When you add a key to an object which has the same name as the value you can simply write {craft}.