Don't understand the first example

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

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.