JavaScript’s array methods like map(), filter(), and reduce() are incredibly powerful. But have you ever thought about how they work behind the scenes? In this post, we’ll create polyfills for these methods to get a deeper understanding of their behavior.

1. Custom map() Polyfill

The map() method creates a new array by applying a function to each element of the original array. It doesn't mutate the original array but returns a transformed version of it.

Polyfill Implementation:

Array.prototype.customMap = function (callback) {
    let resultArray = [];
    for (let i = 0; i < this.length; i++) {
        resultArray.push(callback(this[i], i, this)); // Apply the callback and push the result
    }
    return resultArray; // Return the new transformed array
}

Explanation:

• The customMap method iterates through the original array.
• It applies the callback function to each element, and the result is pushed into resultArray.
• The final transformed array is returned without modifying the original array.

Usage Example:

const numbers = [1, 2, 3, 4, 5];
const multiplied = numbers.customMap(num => num * 5);
console.log(multiplied); // Output: [5, 10, 15, 20, 25]

This custom map() takes each number from the array, multiplies it by 5, and returns a new array with the transformed values.

2. Custom filter() Polyfill

The filter() method returns a new array that includes only the elements that pass a specified condition (i.e., the ones for which the callback function returns true).

Polyfill Implementation:

Array.prototype.customFilter = function (callback) {
    let filteredArray = [];
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            filteredArray.push(this[i]); // If the condition is true, add the element to the result
        }
    }
    return filteredArray; // Return the filtered array
}

Explanation:

• This customFilter function iterates through the array and applies the callback to each element.
• If the callback returns true, the element is added to the filteredArray.
• The original array remains unchanged.

Usage Example:

const numbers = [3, 6, 9, 12, 15];
const greaterThanFive = numbers.customFilter(num => num >= 5);
console.log(greaterThanFive); // Output: [6, 9, 12, 15]

Here, customFilter() returns a new array with elements greater than or equal to 5, filtering out values that don't meet the condition.

3. Custom reduce() Polyfill

The reduce() method applies a function against an accumulator and each element of the array to reduce it to a single value (e.g., summing values).

Polyfill Implementation:

Array.prototype.customReduce = function (callback, initialValue) {
    let accumulator = initialValue; // Start with the initial value if provided
    for (let i = 0; i < this.length; i++) {
        accumulator = accumulator !== undefined ? callback(accumulator, this[i], i, this) : this[0];
    }
    return accumulator; // Return the final accumulated value
}

Explanation:

• The customReduce function takes a callback and an optional initialValue.
• It loops through the array and accumulates values by applying the callback function to the accumulator and the current array element.
• If initialValue is not provided, it starts with the first array element.

Usage Example:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.customReduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

In this example, customReduce() adds up all the elements in the array, starting with an initial value of 0.

Summary

Creating polyfills helps us understand how these fundamental array methods (map(), filter(), and reduce()) work internally:

• customMap() applies a function to each array element and returns a new array.
• customFilter() returns a new array containing only the elements that satisfy a condition.
• customReduce() reduces an array to a single value by applying a function across elements.

These implementations not only help you write your own versions but also deepen your understanding of how JavaScript handles arrays under the hood. Try these polyfills in your own projects or explore others like forEach() and find()!

Code Snippet Recap:

// Polyfill for map
Array.prototype.customMap = function (callback) {
    let resultArray = [];
    for (let i = 0; i < this.length; i++) {
        resultArray.push(callback(this[i], i, this));
    }
    return resultArray;
};

// Polyfill for filter
Array.prototype.customFilter = function (callback) {
    let filteredArray = [];
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            filteredArray.push(this[i]);
        }
    }
    return filteredArray;
};

// Polyfill for reduce
Array.prototype.customReduce = function (callback, initialValue) {
    let accumulator = initialValue;
    for (let i = 0; i < this.length; i++) {
        accumulator = accumulator !== undefined ? callback(accumulator, this[i], i, this) : this[0];
    }
    return accumulator;
}

Feel free to experiment with these polyfills and share your findings. By understanding these methods at a deeper level, you'll be better equipped to use them effectively in your JavaScript projects.

Happy coding! ✨