JavaScript JavaScript Array Iteration Methods Combining Array Methods Nested Data and Additional Exploration

Sam Bailey
Sam Bailey
8,051 Points

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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
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],
  [4],
  [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: