Implement polyfill for Array.prototype.map() method in JavaScript

In this article, we will learn how to implement a polyfill for an Array.prototype.map() method in JavaScript.

What is a polyfill?

A polyfill is a piece of computer code written to implement a feature in a browser that does not yet support it. It could be because of the older version of the browser you are using, or because the new version of the browser does not have that feature. 

What is Array.map() method?

We will discuss the map() method supported by arrays in JavaScript, and implement our own version of it as well. The map() method calls a callback function for each of the array elements and returns a new array with the new values returned by the callback function.

Syntax:

// Arrow function
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn, thisArg)

// Inline callback function
map(function (element, index, array) { /* … */ }, thisArg)

Parameters: This method accepts five parameters as mentioned above and described below:

• callback: This parameter holds the function to be called for each element of the array.
• element: The parameter holds the value of the elements being processed currently.
• index: This parameter is optional, it holds the index of the currentValue element in the array starting from 0.
• arr: This parameter is optional, it holds the complete array on which Array.every is called.
• thisArg: This parameter is optional, it holds the context to be passed as this is to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.

Return value: This method returns a new array created by using the values modified by the arg_function using the value from the original array. This function does not modify the original array on which this function is implemented.

Example:

Javascript

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

// Multiply each element with 2
// and return a new array
const result = arr.map((item) => item * 2)

console.log(result);

// Add 2 to each element of the array
// and return new array
const newArr = arr.map(function (item) { return item + 2 })

console.log(newArr);

Output:

[2, 4, 6, 8]
[3, 4, 5, 6 ]

Now let’s create our own implementation of the Array.prototype.map method:

Steps:

• We will create a map prototype function that will take a callback function as input.
• We will declare a const variable named as resultArray and initialize it with an empty array.
• We will iterate through all the elements of the array on which we want to call the map method and for each of the elements we will execute the callback function and whatever the callback function returns we will store it inside the resultArray.
• We will lastly return the resultArray.
  

Javascript

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

Array.prototype.map = function (callBack) {
    const resultArray = [];

    if (typeof callBack !== "function") {
        throw Error(`${callBack} is not a function`)
    }
    for (let i = 0; i < this.length; i++) {
        resultArray.push(callBack(this[i], i, this));
    }
    return resultArray;
}

// Multiply each element with its index
// and return a new array
const result = arr.map((item, index) => item * index)
console.log(result);

// Add 2 to each element of the array
// and return new array
const newArr =
    arr.map(function (item) { return item + 2 })

console.log(newArr);

Output:

[0, 2, 6, 12]

[3, 4, 5, 6]

In the first example, a new array is created by multiplying each element of the original array with its respective index. And in the second example, a new array is created by adding 2 to each element of the original array.