Javascript array higher-order functions

Question

Can anyone explain to me how this code works? I looked for reduce and concat functions in Array, I understand these functions but I don't understand how this code works initialy:

 var arrays = [[1, 2, 3], [4, 5], [6]]; console.log(arrays.reduce(function(flat, current) { return flat.concat(current); }, [])); // → [1, 2, 3, 4, 5, 6] 

Answer 1

You could add a console.log inside the callback we pass to the reduce and think about the output:

 var arrays = [[1, 2, 3], [4, 5], [6]]; console.log(arrays.reduce(function(flat, current) { console.log('flat: '+ flat + 'current: ' + current) return flat.concat(current); }, [])); 

Initially we concat an empty array and the array [1,2,3]. So the result is a new array with elements [1,2,3]. Then we concat this array with the next element of the arrays , the array [4,5]. So the result would be a new array with elements [1,2,3,4,5]. Last we concat this array with the last element of the arrays , the array [6]. Hence the result is the array [1,2,3,4,5,6].

Ir order to understand in details the above you have to read about Array.prototype.reduce() .

As it is stated in the above link:

The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value

Furthermore the syntax is

arr.reduce(callback, [initialValue])

In you case the initialValue is an empty array, [] .

Answer 2

I've described each step for you.

 var arrays = [[1, 2, 3], [4, 5], [6]]; console.log(arrays.reduce(function(flat, current) { // first loop: flat - [1,2,3], current - [4,5] // [1,2,3].concat([4,5]) -> [1,2,3,4,5] //second/last loop: flat - [1,2,3,4,5], current - [6] // [1,2,3,4,5].concat([6]) -> [1,2,3,4,5,6] //function stop return flat.concat(current); }, [])); 

Answer 3

Well actually it's a wrong use of .reduce() . For this job you don't need no initial array. Just the previous ( p ) and current ( c ) hand to hand can do it. Such as;

 var arrays = [[1, 2, 3], [4, 5], [6]]; console.log(arrays.reduce((p,c) => p.concat(c))); 

Note: Initial is handy when the type of the returned value is different from the array items. However in this case you are processing arrays and returning an array which renders the use of initial redundant.

Answer 4

So assuming we have the 2D array that you do: [[1, 2, 3], [4, 5], [6]] that is being reduced, the function is split into 2 main components.

array.reduce((accumulator, iterator) => {...}, initialValue);

• flat - this is the accumulator of the reduction. It is given the initial value as passed into the second parameter of the reduce function and is used to store the values as the iterator passes through them.
• current - this is the iterator that goes through all values within the data set being reduced.

So as you're iterating through the data set, your example is concatenating the accumulation array with the current value, and by the end you have your new array.

Answer 5

Array.reduce expects a callback with following signature:

function(previousElement, currentElement, index, array)

and an optional initial value.

In first iteration, if initialValue is passed, then previousElement will hold this value and currentElement will hold `firstArrayElement.

If not, then previousElement will hold firstArrayElement and currentElement will hold secondArrayElement .

For the following iterations, previousElement will hold value returned by previous iteration and currentElement will hold next value.

---

So in you example, initially flat holds [] .

return flat.concat(current); will return a new merged array. This value will be used as flat for next iteration, and this process is returned. Finally, value returned by last iteration is used as final return value and is printed in console.