If Array.prototype.filter returns an array, why can't I invoke push() on this return value immediately?

Example:

var arr = ["a", "ab", "c", "ad"];
var arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; });
// result: ["a", "ab", "ad"]

arr2.push("aaa");
// result: ["a", "ab", "ad", "aaa"]

Ok so far.

But what about chaining that push() call to the filter() call?

var arr = ["a", "ab", "c", "ad"];
var arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; }).push("aaa");
// result: 4

Why does chaining filter() and push() result in the number of elements that I would expect, rather than an array of those elements?

If Array.prototype.filter returns an array, why can't I invoke push() on this return value immediately?

Example:

var arr = ["a", "ab", "c", "ad"];
var arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; });
// result: ["a", "ab", "ad"]

arr2.push("aaa");
// result: ["a", "ab", "ad", "aaa"]

Ok so far.

But what about chaining that push() call to the filter() call?

var arr = ["a", "ab", "c", "ad"];
var arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; }).push("aaa");
// result: 4

Why does chaining filter() and push() result in the number of elements that I would expect, rather than an array of those elements?

• javascript
• arrays
• filtering
• chaining
• method-chaining

3 Answers 3

The problem is not with what filter() returns, instead it is with what push() returns.

push() returns the new length of the array, and not the array itself.

So when you do:

var arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; }).push("aaa");

arr2 will be assigned the new length of the array (which happens to be 4 in your case), and not the new array as such.

A modified version that'll do what you want would be:

var arr = ["a", "ab", "c", "ad"], arr2;
(arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; })).push("aaa");
// now arr2 is ["a", "ab", "ad", "aaa"]

I suggest you use concat();

var arr = ["a", "ab", "c", "ad"], arr2;
(arr2 = arr.filter(function(elmnt) { return elmnt.indexOf("a") > -1; })).concat("aaa");
// now arr2 is ["a", "ab", "ad", "aaa"]

now run the above code and see the result/error.

Analyze the difference between your answer before and after running the code

Q2. correct the code so that method chain starts working

function filterOddNumbers(num) {
    if (num % 2 === 0) {
        return true;
    } else {
        return false;
    }
}

const evenNumbers = [1, 2, 3, 4, 5].push().filter(filterOddNumbers);