What is Polyfills?

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.

For example, a polyfill could be used to mimic the functionality of a text-shadow in IE7 using proprietary IE filters, or mimic rem units or media queries by using JavaScript to dynamically adjust the styling as appropriate, or whatever else you require.

Lets take an example to understand the difference between the array methods and polyfill code:

Note: To make it simple for understanding, in this article example callback function will log the elements in the array instead of complex logic. You can place any business logic replacing it.

.forEach()

The forEach() method executes a provided function once for each array element.

Using ES6

let players = ["Dhoni", "Kholi", "Rohit", "ABD"];

players.forEach(function(playerName){
   console.log(playerName);
})

Using Polyfills

let players = ["Dhoni", "Kholi", "Rohit", "ABD"];

Array.prototype.eachPlayer = function(callbackFn) {
  // callbackFn here is the callback function
  // which actual .forEach() function accepts
  for (var i = 0; i < this.length; i++) {
    callbackFn(this[i], i, this);  // currentValue, index, array
  }
}

players.eachPlayer(function(playerName){
   console.log(playerName);
})

Output

Below output will be same for both implementations.

Dhoni
Kholi
Rohit
ABD

.map()

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

Using ES6

let players = ["Dhoni", "Kholi", "Rohit", "ABD"];

let result = players.map(function(playerName){
    return playerName;                    
})

console.log(result);

Using Polyfills

let players = ["Dhoni", "Kholi", "Rohit", "ABD"];

Array.prototype.ownMap = function(callbackFn){
  // declaration of new arr which will be returned.
  var newArr = [];             
  for(var i=0;i<this.length;i++){
    newArr.push(callbackFn(this[i],i,this)); // currentValue, index, array
  }
  return newArr;
}

let result =  players.ownMap(function(playerName){
   return playerName;
})

console.log(result);

Output

// new array is returned, values computed based on logic.
// Always reference differs.
["Dhoni", "Kholi", "Rohit", "ABD"]

.reduce()

Using ES6

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

let playersScore = [90, 85, 105, 80];

playersScore.reduce(function(accumulator,playersScore,index){
   return accumulator + playersScore;                    
},0);

Using Polyfills

let playersScore = [90, 85, 105, 80];

Array.prototype.ownReduce = function(callbackFn,initialValue){   
  var accumulator = initialValue === undefined ? undefined : initialValue;

  for (var i = 0; i < this.length; i++) {
    if (accumulator !== undefined) {
      accumulator = callbackFn(accumulator, this[i], i, this);
    } else {
      accumulator = this[i];
    }
  }
  return accumulator;
}

var teamScore = playersScore.ownReduce(function(acc,score){
   return acc + score;
},0);

console.log(teamScore);

Output

360

Now, try writing your own polyfills for .find(), filter() etc.. methods.

🧑‍💻 Don't learn to hack! Hack to learn!

Happy Coding 😎

References

• Polyfill - MDN

• The Modern JavaScript Tutorial