Implementing a custom function like Array.prototype.filter() function in JavaScript

In JavaScript, the Array.prototype.filter() method creates a new array with elements that pass a test function. Let's implement a custom version to understand how it works internally.

Problem

We need to create a custom function that mimics Array.prototype.filter(). The function should:

• Live on the Array prototype
• Accept a callback function as an argument
• Call the callback for each array element with the element and its index
• Include elements in the result array only when the callback returns true

Implementation

Here's how we can implement our custom filter function:

const arr = [5, 3, 6, 2, 7, -4, 8, 10];
const isEven = num => num % 2 === 0;

Array.prototype.customFilter = function(callback) {
    const res = [];
    for (let i = 0; i < this.length; i++) {
        const el = this[i];
        if (callback(el, i)) {
            res.push(el);
        }
    }
    return res;
};

console.log(arr.customFilter(isEven));

[ 6, 2, -4, 8, 10 ]

How It Works

The custom filter function works by:

1. Creating an empty result array res
2. Iterating through each element using a for loop
3. Calling the callback function with the current element and index
4. Adding elements to the result array only when callback returns true
5. Returning the filtered result array

Advanced Example

Let's test our custom filter with different callback functions:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Filter numbers greater than 5
const greaterThanFive = numbers.customFilter((num, index) => {
    console.log(`Checking element ${num} at index ${index}`);
    return num > 5;
});

console.log("Numbers greater than 5:", greaterThanFive);

// Filter elements at even indices
const evenIndices = numbers.customFilter((num, index) => index % 2 === 0);
console.log("Elements at even indices:", evenIndices);

Checking element 1 at index 0
Checking element 2 at index 1
Checking element 3 at index 2
Checking element 4 at index 3
Checking element 5 at index 4
Checking element 6 at index 5
Checking element 7 at index 6
Checking element 8 at index 7
Checking element 9 at index 8
Checking element 10 at index 9
Numbers greater than 5: [ 6, 7, 8, 9, 10 ]
Elements at even indices: [ 1, 3, 5, 7, 9 ]

Comparison with Native filter()

Key Points

• Custom implementations help understand built-in method behaviors
• The callback function determines which elements are included
• Both element and index are passed to the callback for flexibility
• The original array remains unchanged (immutable operation)

Conclusion

Implementing a custom filter function demonstrates how JavaScript's built-in array methods work internally. This approach uses a simple loop and conditional logic to recreate the filtering behavior of the native filter() method.