Why can I not concat an array to the result of a filter?

Question

I'm a bit curious why the behaviors are different between the two solutions posted below. In the Failing solution, I've concated the zeros array to what I assume by the time of execution, would be the result array of the filter operation. I'm curious why the result is not the updated concated variant (an array with 0s at the end) and instead if simply the initial output of the filter operation.

Passing:

const moveZeros = function (arr) {
 let zeros = [];
 for (let i = 0; i < arr.length; i++) {
   if (arr[i] === 0) zeros.push(0);
 }
 let filteredArray = arr.filter( element => element !== 0).concat(zeros)
 return filteredArray;
  //returns [1,2,3,0,0,0]
}

Failing:

const moveZeros = function (arr) {
 let zeros = [];
 for (let i = 0; i < arr.length; i++) {
   if (arr[i] === 0) zeros.push(0);
 }
 let filteredArray = arr.filter( element => element !== 0);
 // shouldnt the line below concat zeros to the filter result?
 filteredArray.concat(zeros);
 return filteredArray;
  //returns [1,2,3]
}

This also passes: return filteredArray.concat(zeros)

In other words, you're not assigning the `concat`ed array to anything — Federico klez Culloca, Sep 06 '19 at 14:14
`Array.prototype.concat` does not mutate the array it is called on, instead it returns a new array. You never assign this array to anything, so it's lost directly in your next line of code. — connexo, Sep 06 '19 at 14:15
From [doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat): *"The concat() method is used to merge two or more arrays. **This method does not change the existing arrays, but instead returns a new array**."* — Cid, Sep 06 '19 at 14:15
Possible duplicate of ["concat" does not join JavaScript arrays together?](https://stackoverflow.com/questions/12810366/concat-does-not-join-javascript-arrays-together) — Federico klez Culloca, Sep 06 '19 at 14:17
FWIW, your function could simply be `a.filter(x=>x!==0).concat(a.filter(x=>x===0))` — georg, Sep 06 '19 at 14:20

score 2 · Answer 1 · answered Sep 06 '19 at 14:15

2

concat() doesn't modify the array in place, it returns a new array. Your failing version doesn't return the new array, it returns the original array.

answered Sep 06 '19 at 14:15

Barmar

741,623
53
500
612

Ah, that makes sense. Thank you! – kevin Sep 06 '19 at 14:22

score 2 · Answer 2 · answered Sep 06 '19 at 14:17

Array.concat() return the concatenated array instead of the original.

let arr = [1,0,0,2,3,0];
let zeros = [];

for (let i = 0; i < arr.length; i++) {
   if (arr[i] === 0) zeros.push(0);
 }

let filteredArray = arr.filter( element => element !== 0);
 
console.log(filteredArray);
 
let concatenatedArray = filteredArray.concat(zeros);
 
console.log(concatenatedArray);

So you need to reassign filteredArray like:

filteredArray = filteredArray.concat(zeros);

score 1 · Answer 3 · answered Sep 06 '19 at 14:16

From the MDN Web Docs

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

In your passing solution you are assigning the result of a .concat() to a variable, and then returning that variable, whereas in your failing solution, you are returning the original array, because you did not assign the result of filteredArray.concat(zeros) to anything

Why can I not concat an array to the result of a filter?

3 Answers3