Let's create our own filter method in JS
Tags: javascript, filter, webdev
Published: 2018-02-26 21:22:35

---
title: Let's create our own filter method in JS
published: true
description: 
tags: #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] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) 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.

```javascript
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*)

```javascript
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.

```javascript
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.

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

Here's the whole code in one place.

```javascript
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