Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using the reduce function to return an array

People also ask

What is the reduce () array method?

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

How do you reduce an array of arrays?

Using the reduce method. The reduce() method executes a reducer function (a function that you provide as an argument) on each element of the array, resulting in a single output value. Here, the reducer function provided is concat() and the result is stored in an empty array.

What does reduce method return?

The reduce() method returns a single value: the function's accumulated result. The reduce() method does not execute the function for empty array elements. The reduce() method does not change the original array.

How do you use reduce () in JS?

reduce() method. const value = array. reduce(callback[, initialValue]); The callback is an obligatory argument that is a function performing the reduce operation, and the second optional argument is the initial value.


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.


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.


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

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.


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

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]