73

Why does a return of the push method cause

Uncaught TypeError: acc.push is not a function

But a return concat results in the correct solution?

[1, 2, 3, 4].reduce(function name(acc, curr) {
  if (even(curr)) {
    return acc.push(curr);
  }
  return acc;
}, []);


function even(number) {
  if (number % 2 === 0) {
    return true;
  }
  return false;
}

[1, 2, 3, 4].reduce(function name(acc, curr) {
  if (even(curr)) {
    return acc.concat(curr);
  }
  return acc;
}, []);


function even(number) {
  if (number % 2 === 0) {
    return true;
  }
  return false;
}

2
  • 14
    Because push returns a number while concat returns an array.
    – Siguza
    Jun 15, 2017 at 16:01
  • push pushes arrays as one item, concat concats arrays, or an array with an item, beside the different return types. Jun 15, 2017 at 16:19

5 Answers 5

103

The push() adds elements to the end of an array and returns the new length of the array. Thus your return here is invalid.

The concat() method is used to merge arrays. Concat does not change the existing arrays, but instead returns a new array.

Better to filter, if you want a NEW array like so:

var arr = [1, 2, 3, 4];
var filtered = arr.filter(function(element, index, array) {
  return (index % 2 === 0);
});

Note that assumes the array arr is complete with no gaps - all even indexed values. If you need each individual, use the element instead of index

var arr = [1, 2, 3, 4];
var filtered = arr.filter(function(element, index, array) {
  return (element% 2 === 0);
});
11

According to the MDN document say that:

  • push() method: adds one or more elements to the end of an array and returns the new length of the array.
const count = ['pigs', 'goats'].push('cows');
console.log(count); // expected output: 3
  • concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array
console.log(['a'].concat(['b']));// expected output: Array ["a", "b"]

And combined with the final Array#reduce's parameter is the array initialize []), which means that you want to return an array result.

==> So that's the reason why in case that you use concat working well.


Refactor code

  1. If you still want to use Array#reduce and Array#push

const even = (number) => number%2 === 0;
const result = [1, 2, 3, 4].reduce(function name(acc, curr) {
  if(even(curr)) acc.push(curr); // Just add one more item instead of return
  return acc;
}, []);

console.log(result);

  1. The simpler way is to use Array#filter

const even = (number) => number%2 === 0;
console.log([1, 2, 3, 4].filter(even));

7

acc should not be an array. Look at the documentation. It can be one, but..

It makes no sense at all to reduce an array to an array. What you want is filter. I mean, reduce using an array as the accumulator and concating each element to it technically does work, but it is just not the right approach.

var res = [1, 2, 3, 4].filter(even);
console.log(res);


function even(number) {
  return (number % 2 === 0);
}

5
  • 1
    I agree. It was an exam question, I was asked to reimplement filter by using reduce. I had been a little fuzzy on the specs and was only looking for clarification. Aug 25, 2017 at 8:43
  • Say you had an array of numbers that you want to transform to an an array of the running sum of those numbers eg. [1,2,7,4] -> [1,3,10,14]. In this case would reduce with acc being an array be appropriate?
    – apricity
    Jul 5, 2018 at 19:05
  • Its a fine approach actually especially if you chain together operations to avoid running multiple loops, look up "transducers and loop fusion"
    – Babakness
    Sep 22, 2018 at 0:12
  • If you are transforming an array to another array with different values that is shorter (or longer) than the original, then reduce() is perfect. Mar 7, 2019 at 23:54
  • I think that arr.filter is a better approach in this case. Although according to documentation you can use arr.reduce this wayI think that it is commonly accepted that .reduce is used to create one variable from all values in an array. Jan 17, 2020 at 0:39
6

https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki Concat is 945x slower than push only because it has to create a new array.

0

concat() creates a new array by merging the array the method is called on with all arguments flattened (1 level deep) into an array.

push() just adds elements to an existing array.

Since concat() creates a new array avoid it if you use a repetitive task like filling an array with values from another array, it's extremely slow:

` Chrome/117
-----------------------------------------------------------------------
create new array by push       1.0x  |  x10000  510  518  525  541  546
create new array by concat   109.8x  |    x100  560  565  572  582  590
-----------------------------------------------------------------------
https://github.com/silentmantra/benchmark `

let people = [
  { name: "John", age: [30, 40], city: "New York" },
  { name: "Alice", age: [30, 40], city: "Los Angeles" },
  { name: "Bob", age: [30, 40], city: "Chicago" },
  { name: "Eva", age: [30, 60], city: "San Francisco" },
  { name: "David", age: [30, 50], city: "Miami" }
];

const COUNT = 3000;

// @benchmark create new array by push
{
let count = COUNT, result = [];
while(count--) result.push(...people);
result;
}

// @benchmark create new array by concat
{
let count = COUNT, result = [];
while(count--) result = result.concat(people);
}

/*@end*/eval(atob('e2xldCBlPWRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3Rvcigic2NyaXB0Iik7aWYoIWUubWF0Y2hlcygiW2JlbmNobWFya10iKSl7bGV0IHQ9ZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7dC5zcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9naC9zaWxlbnRtYW50cmEvYmVuY2htYXJrL2xvYWRlci5qcyIsdC5kZWZlcj0hMCxkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHQpfX0='));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.