Using the reduce function to return an array

Question

Why is it that when I want to use the push function inside the reduce function to return a new array I get an error. However, when I use the concat method inside the reduce function, it returns a new array with no problem.

All I'm trying to do is pass an array to the reduce function and return the same array.

var store = [0,1,2,3,4];

var stored = store.reduce(function(pV,cV,cI){
  console.log("pv: ", pV);
  return pV.push(cV);
},[]);

This returns an error. But when I use concat:

var store = [0,1,2,3,4];

var stored = store.reduce(function(pV,cV,cI){
  console.log("pv: ", pV);
  return pV.concat(cV);
},[]);

It returns the same array.

Any ideas why?

Answer 1

push returns the new length of the array.

What you need is the initially provided array.

So change the code as below.

var store = [0, 1, 2, 3, 4];

var stored = store.reduce(function(pV, cV, cI){
  console.log("pv: ", pV);
  pV.push(cV);
  return pV; // *********  Important ******
}, []);

concat returns the new array combining the elements of the provided array and concatenated elements. so it works.

Answer 2

Just for completeness, and for the next person who happens on this question, what you're doing is typically achieved with map which, as stated in the docs

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results

Contrast that with the description of reduce :

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 .

(Emphasis mine) So you see, although you can manipulate reduce to return a new array, it's general usage is to reduce an array to a single value.

So for your code this would be:

var store = [0,1,2,3,4];

var stored = store.map(function(pV){
  console.log("pv: ", pV);
  return pV;
});

Much simpler than trying to reconstruct a new array using either push or concat within a reduce function.

Answer 3

I know this is the same answer, but I just want to show that using reduce () , the syntax can also be reduced to a single line of code using ES6:

 var store = [0,1,2,3,4]; var stored = store.reduce((pV,cV) => [...pV, cV], []); console.log(stored);

Answer 4

Array.prototype.push method returns the new length of the array.

Array.prototype.concat method inserts new element into array and returns array back so it can be further processed. This is what you need to do with reduce: pass modified array the the next iteration.

Answer 5

You can always use destructuring:

 var store = [0,1,2,3,4]; var stored = store.reduce(function(pV,cV,cI){ console.log("pv: ", pV); return [...pV, cV]; },[]); console.log(stored);

Answer 6

reduce can be useful if you need to return an array with multiple items for each item iterated;

var inputs = media.reduce((passedArray, video) => { passedArray.push("-i"); passedArray.push(video.filepath); return passedArray; }, []);

Here it's being used to build the input array for ffmpeg;

[{ name: "bob", filepath: "1.mp4" }, { name: "sue", filepath: "3.mp4" }]

=> ["-i", "1.mp4", "-i", "2.mp4]