DEV Community

machy44
machy44

Posted on

Let's create our own filter method in JS

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;
});
Enter fullscreen mode Exit fullscreen mode

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;
    //  }
};
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
nestedsoftware profile image
Nested Software

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

Collapse
 
machy44 profile image
machy44

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

Collapse
 
sektor001 profile image
Sektor001

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

Collapse
 
santoshah profile image
Santosh

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.

Collapse
 
machy44 profile image
machy44

You were right. Sorry I didnt see your comments before

Collapse
 
abidemit profile image
Tiamiyu Sikiru Abidemi

Thanks... quite easy to understand.

Collapse
 
luficoding_d6dafab201e9e6 profile image
LufiCoding

Greak work. I think you have to handle also when we put another function into the initial callback

Image description

Collapse
 
kingjofr profile image
KingJoFr

if (fun(this[i], i, this)) filtered.push(this[i]);

In this line why are there no curly braces around filtered.push(this[i]); ?

like this:

if(fun(this[i], i, this)) {
filtered.push(this[i]);
}

Collapse
 
machy44 profile image
machy44

syntax is not important here. I believe that today I would write it with curly braces.