How to make your own filter method for Array in JavaScript?

This is the third Array method implementation from this series. In this article we are going to implement filter() method. So, let's get started.

Note: This is not the official implementation, every browser and run time environment has their own implementation system.

At the very beginning we create a simple code snippet to understand how and what does a filter() do?

// Create a simple array
let arr = [1, 2, 3, 4, 5, 6, 7];
// Try build-in filter
let newArr = arr.filter((item) => {
  return item > 4;
});

console.log(arr); // Output: [1, 2, 3, 4, 5, 6, 7];
console.log(newArr); // Output: [5, 6, 7];

Let me explain the above code snippet. In the above code, we first declare an array. Than try to filter the array using a condition which was the number should be greater then 4. The filter method will check every element of the array and will return a value if the conditon is true. As we see it will return a value, so we have to store the value in a new array.

Let's see another code snippet.

let arr = [4, 5, 6];

console.log(arr[0] > 4); // Output: false
console.log(arr[1] > 4); // Output: true
console.log(arr[2] > 4); // Output: true

The above code is very simple. We are just manually checking the value if the value is greater than 4 or not by-passing index number in the array.

Here is another code snippet for us. Let's see.

let arr = [4, 5, 6];

let arrLength = arr.length,
  i,
  returnedArray = [];

for (i = 0; i < arrLength; i++) {
  if (arr[i] > 4) {
    returnedArray.push(arr[i]);
  }
}

console.log(arr); // Output: [4, 5, 6];
console.log(returnedArray); // Output: [5, 6];

This time we are check the value using a for loop. Now wrap the code inside a function to make it reusable.

function outFilter(arr) {
  let arrLength = arr.length,
    i,
    returnedArray = [];

  for (i = 0; i < arrLength; i++) {
    if (arr[i] > 4) {
      returnedArray.push(arr[i]);
    }
  }
  return returnedArray;
}

let arr = [4, 5, 6];
let arr2 = [4, 5, 6, 7, 8, 9];

console.log(outFilter(arr)); // Output: [5, 6];
console.log(outFilter(arr2)); // Output: [5, 6, 7, 8, 9];

Now code became reusable, but the problem is how do we change the condition. At this moment we can't change the condition. So, make the condition reusable we also have to pass a call-back function. Inside a call back function, we can put what logic we want.

function outFilter(arr, callbackFun) {
  let arrLength = arr.length,
    i,
    returnedArray = [];

  for (i = 0; i < arrLength; i++) {
    if (callbackFun(arr[i], i, arr)) {
      returnedArray.push(arr[i]);
    }
  }
  return returnedArray;
}

let arr = [2, 3, 4, 5, 6];
let arr2 = [4, 5, 6, 7, 8, 9];

console.log(outFilter(arr, (value) => value > 2)); // Output: [ 3, 4, 5, 6 ]
console.log(outFilter(arr2, (value) => value > 6)); // Output: [ 7, 8, 9 ]

Now it is time to available for all. So, push it to Array's prototype. Don't know about Prototype then read the article about Prototype. Let's do it.

Array.prototype.outFilter = function outFilter(callbackFun) {
  let arrLength = this.length,
    i,
    returnedArray = [];

  for (i = 0; i < arrLength; i++) {
    if (callbackFun(this[i], i, this)) {
      returnedArray.push(this[i]);
    }
  }
  return returnedArray;
};

let arr = [2, 3, 4, 5, 6];
let arr2 = [4, 5, 6, 7, 8, 9];

console.log(arr.outFilter((value) => value > 2)); // Output: [ 3, 4, 5, 6 ]
console.log(arr2.outFilter((value) => value % 2 == 0)); // Output: [ 4, 6, 8 ]

That's it for today. If you find this helpful and interesting, then share this with your friend and tag me also in LinkedIn.