DEV Community

loading...
Cover image for Creating a custom Array.prototype.filter in javascript

Creating a custom Array.prototype.filter in javascript

Felipe Paz
・2 min read

Javascript is a prototype-based language. It means that every native function can receive custom functions or having its original functions modified.

In this article, we will create a custom filter function. For who doesn't know, the filter function is an array prototype function that returns all elements that match against the callback passed as argument. For more information about filter you can check the MDN Doc.

So, without further ado, let's code!

const data = [1, 2, 3, 4, 5];

Array.prototype.myCustomFilter = function (fn) {
  const filtered = []; // it will receive all values that match to condition passed in fn callback.

  for (let i = 0; i < this.length; i++) {
    if (fn(this[i])) {
      filtered.push(this[i]);
    }
  }

  return filtered;
};

const filteredData = data.myCustomFilter(function (el) {
  if (el > 2) return el;
});

// using arrow function
// const filteredData = data.myCustomFilter(el => el > 2);

console.log(filteredData); // output [3,4,5]

Enter fullscreen mode Exit fullscreen mode

Easy, no? But, what really happened here?

Understanding the function

The filter function receives a callback as a parameter. You can find more info about callback here.

Here, we're saying to Array: "Hey dude, you're gonna get a new function called myCustomFilter and it takes a callback function as parameter".

Array.prototype.myCustomFilter = function (fn) {...}
Enter fullscreen mode Exit fullscreen mode

The method filter will return all values that match to condition passed in the callback function.

And here is where the magic happens:

...
for (let i = 0; i < this.length; i++) {
    if (fn(this[i])) {
      filtered.push(this[i]);
    }
  }
...
Enter fullscreen mode Exit fullscreen mode

Once loop has finished, a new array as result is returned containing all values matched to the condition.

const filteredData = data.myCustomFilter(function (el) {
  if (el > 2) return el;
});
Enter fullscreen mode Exit fullscreen mode

And finally our output will be:

console.log(filteredData); // output [3,4,5]
Enter fullscreen mode Exit fullscreen mode

Using the original filter method, our function would become:

const originalFilteredData = data.filter(p => p > 2);
console.log(originalFilteredData); // output [3,4,5]
Enter fullscreen mode Exit fullscreen mode

We cannot forget to mention it that we have some concepts not covered here as the context of this and arrow functions. These guys will be discussed in the future.

I hope you enjoy this article!!

That's all, folks!!!

trying to improve english skills too =D

Discussion (0)