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

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 2

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 3

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]

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);