Implement the filter Method on a Prototype-help

JavaScript
1 
// the global Array
var s = [23, 65, 98, 5];

Array.prototype.myFilter = function(callback){ //??? how do I read this line, is array.prototype the 
  var newArray = [];                          //global array
  // Add your code below this line
  s.forEach(item => {
    if (callback(item)) newArray.push((item)) //??? here I'm taking the anonymous function parameter 
                                              // and in the if statement setting it as a  function that takes item
  });                                        //as parameter(why whats happening) and pushing that item                              
                                             // to the newArray                                                      
                                                                                              
  // Add your code above this line                      
  return newArray;

};

var new_s = s.myFilter(function(item){ //??? here I'm creating a new variable and assigning the function 
       return item % 2 === 1;         //to it and returning the item that has a remainder of 1 (unequal number)
});

I solved this code but how do I read this code. I’m struggling to understand how this code it working. can anyone please explain it in a clearer way, I’ve put three question marks in the comments at the code that I don’t understand.

Functional Programming: Implement the filter Method on a Prototype

1 Like
2

Array.prototype is what all Array instances inherit from.

If something is returned from the callback thats “truthy” it’s being pushed to the newArray.

In this case it’s the function that checks item % 2 === 1. If it returns true, then it’s added to the newArray. The newArray is returned. Anything that doesn’t meet the conditions of the callback is not part of the returned array.

Hence - you have filtered the passed in array.

2 Likes
3

The prototype object holds methods for every object of that type.

var firstArray = [1, 2, 3];
var secondArray = ["a", "b", "c"];

firstArray and secondArray are different arrays, but they are both arrays. That means they share some methods - methods that you’ve already used a lot at this point.

firstArray.push(4);
secondArray.push("d");
firstArray.pop();
secondArray.forEach(function(letter) {
    console.log(letter);
});

These shared methods live on the prototype of the Array object. So, if you want to add a new method that all arrays can use like this, you need to add it to the prototype.

s.forEach(item => {
    if (callback(item)) newArray.push((item)) //??? here I'm taking the anonymous function parameter 
                                              // and in the if statement setting it as a  function that takes item
  });

Recall what the filter method is supposed to do. It should take an original array and remove items that we don’t want, returning a new array with items that we do want. We expect that callback will be a function which returns a boolean. The boolean will tell myFilter if we want to keep that item. The user defines that function and right now, we don’t care what it is. All we care about is that it returns either a truthy or a falsey value.

var new_s = s.myFilter(function(item){ //??? here I'm creating a new variable and assigning the function 
       return item % 2 === 1;         //to it and returning the item that has a remainder of 1 (unequal number)
});

myFilter returns a new array, so in order to use it you have to assign the output to a new variable. This is super important, so here it is in bigger font:

myFilter does not modify the original array. It returns a new one.

The function that you pass in is the callback we defined above. In this case, the function returns true if the number is odd and false if it’s even.

There may be some confusion here because prototype methods shouldn’t be hard coded to point to a global array.

Array.prototype.myFilter = function(callback){
  var newArray = [];                          
  this.forEach(item => { // "this" points to the array you call the method on
    if (callback(item)) newArray.push((item))
  });                                       
  return newArray;
};

var evenNumbers = firstArray.myFilter(function(number) {
    return number % 2 === 0;
});

var lettersBeforeD = secondArray.myFilter(function(letter) {
    return letter < "d";
});
2 Likes
4

Thanks for explaining

6 
// the global Array
var s = [23, 65, 98, 5];

Array.prototype.myFilter = function(callback) {
  var newArray = [];
  // Add your code below this line
  this.forEach(item => {
    if (callback(item)) newArray.push((item))
  });
  // Add your code above this line
  return newArray;

};

var new_s = s.myFilter(function(item) {
  return item % 2 === 1;
});

So the this keyword should be used to point to the array you call the method on?

1 Like
8

This is how i did it, please comment if it is a good solution or not? // Thanks

s.forEach(num => {
if (num !== 98){
newArray.push(num)
}
})