Array Polyfills in JavaScript: Ensuring Compatibility Across Browsers

Not all browsers support modern JavaScript features, which can lead to compatibility issues, especially with array methods like map(), filter(), reduce(), and flat(). Polyfills offer a solution by implementing these methods in environments that lack native support. In this post, we’ll walk through how to create polyfills for these essential array methods to ensure cross-browser compatibility and smooth functionality for your applications.

Polyfill for Array.prototype.map

Let’s take an example to understand how the map method works with array:

const arr = [1, 2, 3];

const doubled = arr.map(function(num) {
  return num * 2;  // Callback function that takes current element (num)
});

console.log(doubled);  // Output: [2, 4, 6]

As you can see the map function takes a callback function that is applied to each element of the array, returning a new array with the transformed values.

Now, let's go ahead and create the mapPolyfill.

Array.prototype.mapPolyfill = function(callback, thisArg) {
    if (!this && !thisArg) {
        throw new TypeError("Array.prototype.map is called on null or undefined");
    }

    if (this) {
        thisArg = this;
    }

    const result = new Array(this.length);

    thisArg.forEach((value, index) => {
        if (value) {
            result[index] = callback(value, index, thisArg)
        }
    });

    return result;
}

1. What does it take?

• callback (Function): A function that is called for every element in the array, and it takes three arguments:

  • currentValue: The current element being processed in the array.

  • index: The index of the current element.

  • array: The array that map is being called on.

• thisArg (Optional): A value to use as this when executing the callback. If not provided, it will default to undefined.

2. What does it return?

• It returns a new array with the results of applying the callback function to each element in the original array without modifying original array.

3. How is it done?

• The method loops over the original array, applies the callback function to each element, and constructs a new array with the results.

Let’s apply the same array from the example to our mapPolyfill and see the result:

const doubledByPolyfill = arr.mapPolyfill((num,index)=>{
  return num * 2;  // Callback function that takes current element (num)
});

console.log(doubledByPolyfill);  // Output: [2, 4, 6]

Polyfill for Array.prototype.filter

Let’s take an example to understand how the filter method works with array:

const words = ["apple", "banana", "kiwi", "orange", "grape"];

const longWords = words.filter((word) => word.length > 5);

console.log(longWords); // Output: ["banana", "orange"]

As you can see, the filter method takes a callback function that loops through the array of words and filters out those that exceed the specified length, returning a new array.

Now, let's go ahead and create the filterPolyfill.

Array.prototype.filterPolyfill = function(callback, thisArg) {
    if (!this && !thisArg) {
        throw new TypeError("Array.prototype.filterPolyfill is applied on null or undefined");
    }

    if (this) {
        thisArg = this;
    }

    const result = [];

    thisArg.forEach((currentValue, index) => {
        if (currentValue) {
            let callbackResult = callback(currentValue, index, thisArg);
            if (callbackResult) {
                result.push(currentValue);
            }
        }
    });

    return result;
}

1. What does it take?

• callback (Function): A function that is called for every element in the array, and it takes three arguments:

  • currentValue: The current element being processed in the array.

  • index: The index of the current element.

  • array: The array that filter is being called on.

• thisArg (Optional): A value to use as this when executing the callback. If not provided, it will default to undefined.

2. What does it return?

• It returns a new array containing all the elements for which the callback function returns a truthy value.

3. How does it perform?

• The method then loops through the array applying the callback function to each element.

• If the callback returns a truthy value, the current element (currentValue) is added to the result array.

Let’s apply the same array from the example to our filterPolyfill and see the result:

const longWordsByPolyfill = words.filterPolyfill((word) => word.length > 5);

console.log(longWordsByPolyfill);  // Output: ["banana", "orange"]

Polyfill for Array.prototype.reduce

Let’s take an example to understand how the reduce method works with array:

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);  // Output: 10

As you can see, the reduce method takes a callback function and an initial value for the accumulator. The callback receives the accumulator and the current element's value, updating the accumulator with each iteration.

Now, let's go ahead and create the reducePolyfill.

Array.prototype.reducePolyfill = function(callback, initialValue, thisArg) {

    if (!this && !thisArg) {
        throw new TypeError("Array.prototype.reducePolyfill is applied on null or undefined");
    }

    if (this) {
        thisArg = this;
    }

    let accumulator = initialValue;

    thisArg.forEach((currentValue, index) => {
        if (currentValue) {
            if (accumulator === null || accumulator === undefined) {
                accumulator = currentValue;
            }
            accumulator = callback(accumulator, currentValue, index, thisArg);
        }
    });

    return accumulator;

}

1. What does it take?

• callback (Function): A function that is called for every element in the array, and it takes four arguments:

  • accumulator: The accumulated value (the result of the previous callback invocation).

  • currentValue: The current element being processed in the array.

  • index: The index of the current element.

  • array: The array that reduce is being called on.

• initialValue (Optional): The initial value to use as the accumulator. If not provided, the first element of the array will be used as the initial accumulator, and the iteration will start from the second element.

• thisArg (Optional): A value to use as this when executing the callback. If not provided, it will default to undefined.

2. What does it return?

• After all iterations are complete, the function returns the final accumulated result from the callback function.

3. How does it perform?

• The accumulator is initialized with initialValue (or the first element if initialValue is not provided).

• It then loops through the array and applies the callback function to each element, updating the accumulator based on the callback’s result.

Let’s apply the same array from the example to our reducePolyfill and see the result:

const numbers = [1, 2, 3, 4];

const sum = numbers.reducePolyfill((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);  // Output: 10

Polyfill for Array.prototype.flat

Let’s take an example to understand how the flat method works with array:

const arr = [1, [2, 3], [4, [5, 6]]];

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

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

As you can see the flat() method accepts a depth parameter, which specifies how deep the array should be flattened. If no depth is provided, it defaults to a depth of 1.

Now, let's go ahead and create the flatPolyfill.

Array.prototype.flatPolyfill = function(depth = 1, thisArg) {
    if (!this && !thisArg) {
        throw new Error("Array.prototype.flatPolyfill is applied on undefined or null");
    }

    if (!thisArg) {
        thisArg = this;
    }

    function flatten(arr, currentDepth) {
        let result = [];

        arr.forEach((value, index) => {
            if (!Array.isArray(value)) {
                result.push(value);
            } else if (currentDepth > 0) {
                result.push(...flatten(value, currentDepth - 1));
            }
        });

        return result;
    }

    return flatten(thisArg, depth);
}

1. What does it take?

• depth (optional, default = 1): This specifies how deep the array should be flattened. By default, it flattens one level, but you can specify a greater depth for deeper flattening.

• thisArg (optional): This refers to the array on which the method is called. It is optional because this (the array) is used if thisArg is not passed.

2. What does it return?

• If the array contains nested arrays, the function recursively flattens them up to the specified depth.

• If the depth is 0, the original array is returned (no flattening occurs).

3. How does it perform?

• The algorithm uses recursion to flatten arrays, which means that for each nested array, the function calls itself to flatten deeper levels.

• As it traverses through the array, it checks each item. If the item is not an array, it simply adds it to the result. If it is an array and the current depth is greater than 0, it flattens the nested array further by calling the flatten function recursively with a reduced depth.

Let’s apply the same array from the example to our flatPolyfill and see the result:

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

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

By implementing polyfills for map(), filter(), reduce() and flat() you can ensure that your JavaScript code works consistently across different browsers. This simple yet powerful technique enhances your application's compatibility with older environments, allowing you to use modern JavaScript features without sacrificing performance or user experience.