Languages like JavaScript keep on updating from time to time. As the language updates so do the engines compiling the code. Often we require a feature in the newer versions of the language to support on older engines. Polyfills are a way to provide backwards compatibility for newer features by implementing the new features with supported code. Polyfills should not be confused with shims which are used to merely correct existing features.

While shims are used for covering up old sins, polyfills are used for bringing future enhancements back in time. - StackOverflow

Implementing a Polyfill

With the definition and usage out of our way, how do we actually go about implementing a polyfill for some function? Let us take an example here. If you have read my previous blog on Functional Array Methods, the array.map() was a new addition in ES5. It did not exist (atleast in the way we know and use it today) in the earlier versions. So, let us try to implement one without using anything from ES5 and above.

What do we know about array.map() ?

• It works on an array.
• It iterates over every element of the array.
• It runs a callback on each element.
• Callback takes 3 parameters (current Value, index, array).
• Callback returns the modified value which is pushed in a new array.
• It return a new array without mutating the original one.

For now the above information is good enough to create a barebones polyfill for map. We will be creating our own method on Array prototype.

• Step 1 : Create a new method (ourMap) on Array.prototype

  Array.prototype.ourMap = function() {}
  

• Step 2 : Iterate over the array. As we are using a prototype, our 'this' would refer to the array on which ourMap will be used.

  Array.prototype.ourMap = function() {
  for(var i = 0; i < this.length; i++) {}
  }
  

• Step 3 : Add a callback parameter and call it on each iteration with the 3 parameters

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

• Step 4 : Create a new array and push the modified elements on each iteration

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

• Step 5 : Return the new array

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

Final version :

var numbers = [11, 32, 65, 93, 77]
Array.prototype.ourMap = function(callback) {
  var newArray = []
  for(var i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this))
  }
  return newArray
}
function addOne(currentValue) {
  return currentValue + 1
}
console.log(numbers.ourMap(addOne))
// [12, 33, 66, 94, 78]

Now its your turn to write a polyfill for filter and reduce. Do tell your answers in the comment

Hint for filter : Changing just 2 lines in the above code should do the trick.

If you still find writing a polyfill to be difficult that's alright. Just write down whatever you know about the functionality and start implementing step by step. No need to rush and you'll reach the solution easy.

Till next time!