DEV Community

Cover image for .map() Polyfill
Swapnadeep Mohapatra
Swapnadeep Mohapatra

Posted on • Updated on

.map() Polyfill

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',
]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

Connect with me

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

LinkedIn My Portfolio Twitter Instagram

Discussion (4)

Collapse
lexlohr profile image
Alex Lohr

Your polyfill deviates from standard behavior regarding sparse Arrays. Compare

[1,,3].map(console.log)
// only logs existing items
[1,,3].myMap(console.log)
// also logs the empty item
Enter fullscreen mode Exit fullscreen mode

Use for..in and check for hasOwnProperty to rectify that issue.

Collapse
tanth1993 profile image
tanth1993

I think you misunderstand " .map() returns the modified array." However, .map() return a new array.

Collapse
swapnadeepmohapatra profile image
Swapnadeep Mohapatra Author

Thank you, I edited it.

Collapse
4rontender profile image
Rinat Valiullov

See also here map polyfill