What is a polyfill?

Polyfill is code that implements a feature on web browsers that is expected to be provided by the browser natively but is not available. The developer uses one's logic to implement the solution.

What is .map()

It is an array function that is used to iterate over an array and create a new array with the results of the calling of the function. This comes in handy when we don't want to implement the for loop from scratch and want to modify all the elements of the array in the same way, hence saving a lot of time as well as some lines of code.

The function is applied in an array and takes in another function as a parameter (known as callback function). In the callback function's parameters the current element of the array, index , and the complete array are passed. They same way it happens in the .forEach() function.

.map() is very similar to that of .forEach(). But instead of returning the items, .map() returns the a new array by modifying the existing elements. (the old array doesn't get changed)

Writing the Polyfill

We will be iterating over an array of some listed companies in NSE and adding the prefix of "NSE:" before every stock.

var stocks = [
  'COLPAL',
  'ITC',
  'IOC',
  'NHPC',
  'INFY',
]

Firstly let's try running the native .map()

nseStocks = stocks.map(function (stock) {
  return `NSE: ${stock}`
});

console.log(nseStocks)
// ["NSE: COLPAL", "NSE: ITC", "NSE: IOC", "NSE: NHPC", "NSE: INFY"]

So, now let's write the polyfill and add the map function to the prototype of Array.

Array.prototype.myMap = function (callback) {
  var newArray = [];
  for (var i = 0; i < this.length; i++) {
    newArray[i] = callback(this[i], i, this)
  }
  return newArray;
}

Now let's try running our polyfill.

nseStocks = stocks.myMap(function (stock) {
  return `NSE: ${stock}`
});

console.log(nseStocks)
// ["NSE: COLPAL", "NSE: ITC", "NSE: IOC", "NSE: NHPC", "NSE: INFY"]

Connect with me

For more awesome JS or WebDev related blogs check out my profile

LinkedIn My Portfolio Twitter Instagram