Photo by Paweł Czerwiński on Unsplash

How to write polyfill for Array map() in JavaScript

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!