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


Josh C
Josh C
Courses Plus Student 503 Points

JavaScript: Flatenning array of arrays using reduce

I actually answered this exercise fairly quickly, but I just want to completely understand it.

Below you will find the problem and my solution, but I'm not clear WHY the solution worked (I just memorized how to do the method from a problem just minutes before this one).

// Using reduce method, flatten the customerNames array of arrays. In other words, take all the names from each array inside customerNames and place them in one big array. Store the flattened array in the flattenedCustomerNames variable. You can use the array in the comments below for reference.

const customerNames = [
    [ "John", "Sandy", "Tyrone", "Elizabeth", "Penny" ],
    [ "Barry", "Wanda", "Jamal", "Hayden" ],
    [ "Portia", "Pam", "Philip" ]
let flattenedCustomerNames;

// flattenedCustomerNames should be: ["John", "Sandy", "Tyrone", "Elizabeth", "Penny", "Barry", "Wanda", "Jamal", "Hayden", "Portia", "Pam", "Philip"]
// Write your code below

flattenedCustomerNames = customerNames.reduce((arr, names) => [ ...arr, ...names], []);

My questions are:

  1. Why does the return need square brackets? I'm away the output needs to be an array, hence why we inserted the empty array as the second variable. So since we have the empty array as the second variable, why are the brackets in the return necessary? Shouldn't the second variable imply that we want the answer in an array?
  2. Can someone explain why ...arr, ...names works in this solution? I'm away that reduce needs an accumulator and current value variable, but I'm confused on how this format outputs the correct answer of the nicely flattened array of all the desired values.

I hope these questions make sense. Thanks!!


1 Answer

Steven Parker
Steven Parker
230,037 Points

The "spread" operator ("...") converts an array into separate arguments, so the brackets are used to re-assemble the arguments into an array. The second argument only provides the initial value of the accumulator, but the function spreads it out and re-assembles it each time.

By combining both terms, "...arr, ...names" gives you any accumulated names followed by the names from the current array all spread out. The the brackets make the complete set back into a larger array which becomes the new accumulator.

Make sense now?

Also, that second argument isn't necessary since the individual items are arrays.

Josh C
Josh C
Courses Plus Student 503 Points

It definitely makes more sense now. Thank you!