Why Array.prototype.reduce() is not taking an empty array as accumulator?

Question

I am trying to filter all the elements in an array which are bigger than 10 to a new array. I am intentionally not using Array.prototype.filter() since I want to learn the reduce() method. Here is the code I was playing with

var collection = [3, 5, 11, 23, 1];

// fileter all the elements bigger than 10 to a new array

var output = collection.reduce(function(filteredArr, collectionElemet) {
  if (collectionElemet > 10) {
    return filteredArr.push(collectionElemet);
  }
}, []);

I was expecting that filteredArr would be initialized with an empty array at the time of first callback execution as it happens with many examples provided here. But when I run this code, I get the error Cannot read property 'push' of undefined, where am I messing it up? Thank you!

If the condition is true - you return a number, if not true - you return an `undefined`. If you simply want to filter - use `Array.prototype.filter`, your current code as it is is ugly and misleading. — zerkms, Sep 18 '15 at 01:35
@zerkms: That's fair for production code, not for education/experimentation. The OP clearly states that he knows about `filter`, but is trying to understand `reduce`. — Amadan, Sep 18 '15 at 01:39

score 75 · Accepted Answer · edited Mar 07 '19 at 10:19

When you try to do return filteredArr.push(collectionElement), in essence you are returning length of filteredArr after the push operation. The push() method adds one or more elements to the end of an array and returns the new length of the array. Ref: Array.prototype.push().

You need to return the filteredArr from your anonymous function, so that it is used as the previousValue for the next call

var collection = [3, 5, 11, 23, 1];

// filter all the elements bigger than 10 to a new array

var output = collection.reduce(function(filteredArr, collectionElement) {
  if (collectionElement > 10) {
    filteredArr.push(collectionElement);
  }
  return filteredArr;
}, []);

score 12 · Answer 2 · answered Sep 18 '15 at 01:43

12

Array.prototype.push will return the length of the new array. You need to return the accumulator. A succinct way to do this is with Array.prototype.concat, since that method will actually return the array:

var collection = [3, 5, 11, 23, 1];

var output = collection.reduce(function(filteredArr, collectionElemet) {
  if (collectionElemet > 10) {
    return filteredArr.concat(collectionElemet);
  }
}, []);

You have to return the accumulator so the next iteration can use the value of the accumulator.

answered Sep 18 '15 at 01:43

Josh Beam

19,292
3
45
68

Not my downvote, but *concat* returns a new array every time, which is inefficient. *push* is the obvious choice for appending new elements to an existing array. – RobG Sep 18 '15 at 02:53
2

Not always is about efficiency, Is valid answer because illustrate two things, how to make a solution in one line and that @segmentationfaulter must return filteredArr. His confusion probably was thinking that filteredArr.push will return filteredArr. – titusfx Jun 29 '17 at 06:34

Why Array.prototype.reduce() is not taking an empty array as accumulator?

2 Answers2