Create a polyfill for the filter array method

In modern JavaScript development, we often rely on array methods like filter to manipulate and extract data from arrays with ease. However, older browsers may lack support for these convenient methods, leading to compatibility issues in our projects. In this blog post, we’ll explore the concept of polyfills and walk through the process of creating a custom polyfill for the filter array method, ensuring cross-browser compatibility for our applications.

Understanding the Filter Method: The JavaScript filter method allows us to return a new array with all elements that pass a test condition implemented by the provided callback function.
Its syntax is straightforward, where the filter accepts a callback function as an argument.

// Original array
const arr = [2, 345, 654, 23, 24];

// Callback function for filtering even numbers
const isEven = (item) => {
  return item % 2 === 0;
};

// Using native filter method
const filteredArray = arr.filter(isEven);
console.log(filteredArray); // Output: [2, 654, 24]


The Need for a Polyfill: While the filter method is widely supported in modern browsers, older browsers like Internet Explorer 11 may not provide native support. To ensure our applications work seamlessly across all environments, we can create a polyfill—a piece of code that replicates the functionality of a missing feature.

Creating the Polyfill: Let’s dive into the implementation of our custom polyfill for the filter method. To create a polyfill for the filter array method, we need to extend the Array.prototype object with our own implementation of the filter method(Array.prototype.myFilter). This allows us to replicate the behaviour of the filter method in environments where it may not be supported. “myFilter” method should work similar to the filter method.

const arr = [2, 345, 654, 23, 24];

// Callback function for filtering even numbers
const isEven = (item) => {
  return item % 2 === 0;
};

const polyfillFilteredItems = arr.myFilter(isEven);


Now, polyfillFilteredItems should console Output: [2, 654, 24] like above.

// Custom filter function
Array.prototype.myFilter = function(callback) {
  const filtered = [];

  // here, "this" will be 'arr'
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i])) {
      filtered.push(this[i]);
    }
  }
  return filtered;
};
  • if (callback(this[i])), the provided callback function is called with the current element this[i] as an argument. If the callback returns true for the current element, it means the element passes the filter criteria.
  • filtered.push(this[i]);: If the callback returns true, the current element is added to the filtered array otherwise, it won’t be added.
  • Finally, the filtered array containing the filtered elements is returned from the myFilter method.


This custom myFilter function behaves similarly to the filter method, filtering elements from the array based on the criteria specified by the provided callback function.

Understand “this” keyword in Javascript

1 comment