CODEWITHSUNDEEP
javascriptconcatenationpush
The cows are in the Meadow
The cows are in the Meadow

Reputation: 989

Difference between concat and push?

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

Upvotes: 77

Views: 82858

Answers (5)

Alexander Nenashev
Alexander Nenashev

Reputation: 22769

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

Upvotes: 0

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14208

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

Upvotes: 14

shiv garg
shiv garg

Reputation: 791

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.

Upvotes: 8

Karl Reid
Karl Reid

Reputation: 2217

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

Upvotes: 7

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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

Upvotes: 108

Related Questions