filter() method in javascript

The functionality of filter() method is to filter out the elements based on the condition provided in the callback function. This method creates new array with all the elements which are satisfying given condition in the callback function.

basic syntax of filter() method is,

array.filter(callbackFn)

Let's see one example,

const numbers = [ 5, 2, 9, 4, 7, 5 ];
function greaterThan4(n){
    return n>4
}
const result = numbers.filter(greaterThan4);

Here in this example the callback function graterThan4() takes 1 element at a time and compares it in the function if element is greater than 4 then it returns true else it returns false, if it returns true then filter method adds that element to newly created array and continues to check other elements and at the end returns output array and stores in result variable.

Now let's see some other forms of filter() method, like what are the other argument it takes, how many arguments does callback function can take and all.

'this' argument in filter

filter() method takes 2 arguments first one is callback function and other one is this argument, it looks like

array.filter(callbackFn, thisArgument)

here callbackFn is mandatory to pass and thisArgument is optional if it is not provided then by default value will be undefined means if we use this in callback function then it points to global object. Let's see one example about using thisArgument

const marks = [
  { name: "Deekshith", mark: 75 },
  { name: "Vinod", mark: 85 },
  { name: "Rohan", mark: 56 },
  { name: "Akshay", mark: 90 },
];
const grade = {
  distinction: 85,
};

function checkGrade(student) {
  return student.mark >= this.distinction;
}

const distinction = marks.filter(checkGrade, grade);
console.log(distinction) //output: [  { name: "Vinod", mark: 85 }, { name: "Akshay", mark: 90 } ]

Here we used thisArgument called grade so this is used as callback function's this value.

arguments for callback function

callback function in filter method normally expects 3 arguments they are element, index and array. If we write this in arrow function then it looks like

array.filter(( element, index, array ) => { /* body */ })

element -> this is the element to be processed in callback function. index -> this is the index of the current element which is going to be processed. array -> this is the array on which the filter is applied.

Polyfill for filter()

At first let's see how we can implement our own basic filter method to filter the array elements,

Array.prototype.myFilter = function (callbackFn) {
  let result = [];
  for (let i = 0; i < this.length; i++) {
    if (callbackFn(this[i])) {
      result.push(this[i]);
    }
  }
  return result;
};

Now let's see how we can write filter method which accepts context (thisArgument) also,

Array.prototype.myFilter = function (callbackFn, context) {
  let result = [];
  for (let i = 0; i < this.length; i++) {
    if (callbackFn.call(context, this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

This is about filter() method of javascript

Thank you for reading...

Usage of filter() method in javascript.

Table of contents

'this' argument in filter

arguments for callback function

Polyfill for filter()