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 Nested Data and Additional Exploration

Don't understand the first example

I'm having trouble understanding the first exercise and the construction of the arrays with the spread operator.

When he says "Because we have two arrays that we want to join, I'll return a new array that starts with the all the elements collected inside the accumulator. And ends with all the elements from innerMovies." is the part where I get lost. If the accumulator is already initialized to an empty array, why are we returning another array each time? Does this not just place an array within an array within an array etc.? Apparently not, as the console output is the desired result, but I don't understand why this is the case.

Also, why would you want the array to end with the spread of innerMovies, if it already contains the spread of arr, which should have accumulated the contents of innerMovies? I would have thought this would cause the entire array to be duplicated.

I feel like I'm missing something here. I wonder if someone could explain it to me in a different way please?

1 Answer

Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hey Sam Bailey, no worries for finding this a bit confusing. It is. :smiley:

Higher order functions like the reduce function iterate over an array and run some custom function once for each item in the array. The reduce function in particular has an extra accumulator property which can be a number or an array that keeps track of what was returned on the previous iteration. So basically what's happening in the example, the array of arrays is being looped over. And at each iteration, the callback function is using the spread operator to take whatever is currently in the accumulator array, plus whatever is in the inner array at the current iteration of the loop, and spread all that out into a new array that gets returned and set as the new accumulator at the end of each iteration. So on each iteration, the accumulator contains everything that has been looped over already. And by the end of the loop, all items in the array of arrays have been flattened into a single array.

My apologies if that doesn't help clear anything up. This is a fairly complex topic and can be difficult to express clearly in words. The best way to get a better understanding of what's happening here would be to experiment with the code.

Take the example, and change the values in the array of arrays to whatever you want. Keep the structure super simple at first. Use the reducer to flatten it, but log out the accumulator and/or the inner array in the callback, so each iteration is detailed in the console. Something like this:

const arrOfArrsToFlatten = [
  [1, 2, 3],
  [5, 6]

arrOfArrsToFlatten.reduce((accumulator, innerArr, index, arrOfArrs) => {
  console.log(`This is what the accumulator looks like at iteration ${index}: ${accumulator}`);
  return [...accumulator, ...innerArr];
}, []);

And then experiment by changing the values and complexity of the array of arrays that you're working with. Hope that helps, Sam. :thumbsup:

Thank you so much for this explanation and practice example! It really helped clear things up for me!