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?

return PV.push means on the next iteration, PV will be a Number, not an array, because push returns the length of the array - if you want, you could do return pV.push(cV), pV; - though, there's no benefit except for 1 less line of code i.e. pV.push(cV); return pV; — Jaromanda X
– Jaromanda X, Commented Feb 16, 2016 at 11:27
if all you want to do is "copy" the array ... var stored = store.slice(); will do — Jaromanda X
– Jaromanda X, Commented Feb 16, 2016 at 11:30
@Andy care to elaborate? The docs literally state map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results which seems to perfectly describe what the questioner was doing. — Jamiec
– Jamiec, Commented Feb 16, 2016 at 11:48
@Andy - you can bang a nail into a wall with the heel of your shoe - but generally we prefer the right tool for the right job! Read the docs to both methods, or just read my answer below. — Jamiec
– Jamiec, Commented Feb 16, 2016 at 11:59
I was simply pointing out that your claim "To return a new array from an array, you want map not reduce" was incorrect. — Andy
– Andy, Commented Feb 16, 2016 at 12:00

Venkata Raju · Accepted Answer · 2018-08-03 14:20:50Z

145

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.

edited Aug 3, 2018 at 14:20

answered Feb 16, 2016 at 11:45

Venkata Raju

5,3914 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamiec · Accepted Answer · 2016-02-16 11:57:46Z

43

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.

edited Feb 16, 2016 at 11:57

answered Feb 16, 2016 at 11:51

Jamiec

136k15 gold badges142 silver badges202 bronze badges

4 Comments

dossy Over a year ago

Sometimes, you want to do a .filter().map() and rather than being O(2N) you can cut the work in half by doing a single pass using .reduce(), keeping yourself O(N).

fedorqui Over a year ago

I assume with ECMA it will be something like store.map(it => {return it});?

Jamiec Over a year ago

@fedorqui'SOstopharming' store.map(it => ({it})) will also work.

fedorqui Over a year ago

Excellent! While I think I would go with the version with a return, so it is easier to understand to me :)

TJ 96 · Accepted Answer · 2020-06-30 07:01:22Z

26

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

answered Jun 30, 2020 at 7:01

TJ 96

3483 silver badges8 bronze badges

1 Comment

Venkata Raju Feb 2 at 23:15

or var stored = store.reduce((pV,cV) => (pV.push(cV), pV), []);

kmoser · Accepted Answer · 2022-02-28 05:47:59Z

5

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]

edited Feb 28, 2022 at 5:47

kmoser

9,3693 gold badges28 silver badges45 bronze badges

answered Sep 20, 2018 at 20:54

abitofcode

3,0761 gold badge19 silver badges11 bronze badges

Comments

dfsq · Accepted Answer · 2016-02-16 11:49:15Z

2

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.

edited Feb 16, 2016 at 11:49

answered Feb 16, 2016 at 11:30

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Quolonel Questions Over a year ago

But it's not the same array; concat allocates a new array which is inefficient.

jean d'arme · Accepted Answer · 2020-06-09 20:21:50Z

2

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

edited Jun 9, 2020 at 20:21

answered Apr 6, 2020 at 15:05

jean d'arme

4,3557 gold badges40 silver badges79 bronze badges

Comments

Waruyama · Accepted Answer · 2024-10-23 07:01:43Z

0

Here is a one-liner that uses the push() method with a comma expression:

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

let stored = store.reduce((pV,cV) => (pV.push(cV), pV), []);

console.log(stored);

edited Oct 23, 2024 at 7:01

answered Oct 22, 2024 at 21:01

Waruyama

3,5433 gold badges34 silver badges47 bronze badges

Collectives™ on Stack Overflow

Using the reduce function to return an array

7 Answers 7

Comments

4 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

4 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest