Let's create our own filter method in JS

#javascript #filter #webdev

JS is a prototype-based language which means that if we create an array variable, it's prototype is Array.prototype. Every array inherits the methods from Array.prototype. We will see how the things are going in the further text.

In this post I will try to show how methods work under the hood in JS. We will take focus on the filter method. On developer mozilla you can see how the filter method is called and how it filters an array.

Try to understand things

We will make our own filter function for learning purposes to see how filter method really works and why we can call methods on arrays in the way we do in JS.

var returnedArr = [1,2,3,4,5,6].mfilter(function(element, index, arr) {
  return element > 5;
});

On the code above we can see that returnedArr variable is declared. On array of ints we call mfilter method and we are passing the function with element, index and array parameters. In the body of function we want to return elements which are greater than 5.

To define mfilter we must declare the method on Array.protoype.(Otherwise js interpreter will print the TyperError which tells us that mfilter is not a function because it cannot be found in Array.prototype)

Array.prototype.mfilter =  function (fun) {
  var filtered = []; 
  console.log(this);//output: [1,2,3,4,5,6]
  console.log(fun);
    // output:
    //  function (element, index, arr) {
    //    return element > 5;
    //  }
};

We are sending the function to Array.prototype.mfilter and we must receive that function as a parameter. If we console.log this keyword in mfilter we can see that this has a value of array on which we called mfilter.

Also if we console.log fun we can see that we have got the function which we sent as a parameter to mfilter.

Next step is to loop through this and return a value which is greater than 5.

Array.prototype.mfilter =  function (fun) {
  var filtered = []; 
  for(let i = 0; i < this.length; i++) {
    if (fun(this[i], i, this)) filtered.push(this[i]);
  }
  return filtered;
};

In for loop we are looping through this. If the fun returns true ( element is greater than 6) that element will be pushed in filtered variable. After for loop we return filtered variable.

In the end, if we console.log returnedArr it will output array with value 6 in it.

console.log(returnedArr); // output: [6]

Here's the whole code in one place.

Array.prototype.mfilter =  function (fun) {
  var filtered = [];
  for(let i = 0; i < this.length; i++) {
    if (fun(this[i], i, this)) filtered.push(this[i]);
  }
  return filtered;
};

var returnedArr = [1,2,3,4,5,6].mfilter(function(element, index, arr) {
  return element > 5;
});

console.log(returnedArr);

Conclusion

It would be great to always try to understand how something works under the surface. I hope that this post helped someone to get a better idea how JS filter method work. If someone has a question or wants to make a discussion about something from the post it will be a pleasure for me to answer.

P.S. This is my first post and it was really hard to write something coherent, ufff :D

Top comments (9)

Nested Software • Feb 27 '18

Cool! It's funny, I was just inspired to write my first post about a 'lazy' version of 'map' and 'filter' in JavaScript!

machy44 • Feb 27 '18

That's great! :) It seems very interesting. I will take a look on your post.

Sektor001 • Dec 5 '18

Why do you have (this[i], i, this) in the if statement? dont you only need this[i]?

Santosh • Feb 10 '21

I was thinking same. In this context we would need only this[i] but we are trying to create a generic function that does more than just a filter. By passing index and entire array we can also get specific position element. This is what I have understand.