How to write polyfill for Array map() in JavaScript
By: Puneet Billing
Tags: Array Map, Array Methods, Arrays, JavaScript

Photo by Paweł Czerwiński on Unsplash

If Array map() is not supported by your browser or you are curious on how to implement your own Array map() or out of gazillion JS questions, you were asked to write your own version of Array map() in an interview then you have come to the right place.

Before we begin, let’s understand few terminologies:

What is polyfill ?

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. What does Array map() do ?

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Syntax:

array.map(function(currentValue, index, arr), thisValue)

huh? okay, check out the example below to understand what it really does.

// Using map to return new array with values that are twice the elements in original array // original array

const originalArray = [1, 4, 9, 16]; // call map on original array and pass a callback function

const newArray = originalArray.map(x => x * 2); // prints [2, 8, 18, 32]

console.log(newArray);

map() performs three operations:

1. iterates over array elements

2. perform an operation defined in the callback function on those elements

3. returns modified array

Let’s see how we can achieve this:

Step 1: Create new javascript file and load this file before anything else in the code

Step 2: Start writing code. Check if map is supported or not, if not, only then we use our custom map(). To do that, we rely on prototype. You must be wondering,

What is a prototype?

Array.prototype is a global object constructor allows you to add new properties and methods to the Array() object.

// this means map() is not available

if (!Array.prototype.map) {

} Note: Array.prototype does not refer to a single array, but to the Array() object itself.

Step 3: Get access to array elements

How do we do that? answer is simple, by using:

this

Below is an example on how we can access elements of array on which map() is invoked.

// define custom map()

Array.prototype.map = function() {

console.log(this) // prints array [1,2,3]

} // declare an array

const arr = [1, 2, 3] // call custom map() on array

arr.map(()=>{})

Step 4: Pass the elements to callback function to perform any operation of your choice.

Now that we have access to array elements, let’s add a callback functionality and take a look at the final implementation.

// define custom map()

if (!Array.prototype.map) {

Array.prototype.map = function(callback) {

let newArray = [];

// iterate array elements

for(let item of this) {

// pass each element to callback and push response to new array

newArray.push(callback(item));

}

// return final array

return newArray;

}

} // declare an array

const arr = [10,20,30,40]; // call custom map() on array to square each element or perform any other operation

const squaredArray = arr.map((i) => i * i); // prints [100,400,900,1600]

console.log(squaredArray);

Check out the CodePen below to execute custom map(). Cheers!