Understanding how Object methods work under the hood

We all use a lot of methods while coding everyday in JavaScript. They help us do more while coding less. Array methods like Array.map,Array.filter,Array.reduce are most commonly used, while in case of Objects, we have used Object.entries,Object.keys,Object.values.

But, have you ever wondered how do they work under the hood? Ever thought of writing your own method that you used on Arrays or Objects? Well, think no more. You can create your own methods that you can use in your code just like you use other in-built methods for Arrays and Objects in JavaScript.

So, writing your own methods that mimics a certain functionality that are supported by newer browsers but is not natively supported on older browsers are called Polyfills.

Here's what MDN docs describe what a polyfill is :

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.

But why write a polyfill when the methods are doing their job ? Well, though the purpose of writing a polyfill is the provide support to browsers that don't support the functionality, you don't need to limit yourself to just that. I can think of a few situations where writing your own polyfills helps you :

1. When you want to understand how an existing method works.
2. When you want to write your own method that does the work of two or more methods that you usually use together.
3. When you sit for an interview and the interviewer asks you to write a polyfill for a functionality that is extensively used in their company.

Now that you know all that, what does it actually take to write a polyfill ?

• Well honestly, to write your own polyfills that mimic existing methods, you need a proper understanding of how they actually work in the first place
• And to write your own custom ones for browsers, you need to be good with vanillaJS
• Most importantly, a good understanding of this

"Talk is cheap, show me the code" - Linus Torvalds

Let's start with writing our own polyfill that mimics our favorite Array.map method.

Step 1: Understanding how Array.map works

Lets look at the syntax first.

let resultArray = array.map(callback(currentValue, index, array) {
  // return element for resultArray after executing the operations
});

So, map takes a callback function with 3 arguments :

1. currentValue of the array it's being called upon.
2. index of that current value
3. The array itself upon which the map is being called upon.

Lets look at an example now

const array = [1,2,3,4,5];
const resultArray = array.map(currentValue => currentValue*10)
console.log(resultArray) //[10,20,30,40,50]

The map method takes each element of the array it's called upon and returns a new array with elements where each element is the result returned by the callback function provided. Here the callback function is currentValue => currentValue*10

So, basically, the map method is a for loop that runs for the length of the array and during each iteration, it takes one element of the array, calls the callback function on the element, and adds it to the new array. Once it iterates through all the elements of the array, it returns the new array as a result.

Step 2: Writing our own polyfill

So, all the methods that we use on Arrays and Objects are placed under something called Prototype. Basically, a Prototype is a constructor that allows you to add new methods for all JavaScript Objects. Read more on Object Prototypes

Back to coding, Array.Prototype.{polyfill_name} is how you will be declaring that you are now creating a new polyfill where {polyfill_name} is the name you give for your polyfill. Make sure to not use an existing method name!

Here's my own polyfill for map

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

Let's breakdown the above code and understand how it was written

• myMap is the name of our polyfill. It takes a callback function as per the syntax of map.
• Create a new array (here resultArray) which will hold the resulting output of the elements passed through the callback function.
• Loop through the length of the array and call the callback on each element of the array and push it to the new array. Herethis is pointing to the array upon which it is being called upon.
• return the new array that holds the result.

We can now use our polyfill and find out if it now mimics the functionality of map

const array = [1,2,3,4,5];
const resultArray = array.myMap(ele => ele+2)
console.log(resultArray) //[3,4,5,6,7]

This is how you write your own polyfills. Simple right?

Remember that there are limitations to writing your own polyfills.

• For example, you cannot write polyfills using arrow functions as they fall under function expressions and not a traditional function declarations.
• Also, inbuilt operators like rest, spread cannot be polyfilled as they are not attached to any prototype of an Object.
• Another important thing is that error handling has to be taken care of while creating our own polyfills.
• And lastly, to keep in mind that a polyfill being written is for a browser that has no support for it. So, using let and const (which were introduced as a part of ES6) might not work and using var will work as it's present in JavaScript ever since the beginning.

So, how to check if you need to write a polyfill or not? Well, each method explained in the holy MDN docs contains a table at the end which shows the browser support for that method. You can also make use of this website to check for browser support and more.