Polyfill for bind()

In this post we will learn how to create our own implementation of bind(). this helps to consume this functionality in browsers where bind() is not inherently supported.

Photo by Nathan da Silva on Unsplash

What are Polyfills?

Polyfills is a way to use modern features (usually JS) on browsers where it is currently unsupported. We do this by mimicking the functionality using supported methods along with our own logic

Prerequisites to better understand this post

• Basic understanding of call, apply & bind methods.
• Basic understanding of closures
• Understanding the rest & spread operators
• Understanding of prototypal inheritance

Code Scenario

Let’s say we have a function to print the first name and last name passed as arguments. All names belong to members of the same family so they will have the same last name. Instead of passing the last name again and again we can create a partial function using bind() so that we only need to pass the first names. Let’s try it out with the inbuilt bind() first.

// method to print full name
const printFullName = function(lastName, firstName) {
  console.log(`Hello, my name is ${firstName} ${lastName}`);
}
// partial function created using bind with last name fixed as 'Simpson'.
const partialPrint = printFullName.bind(null, 'Simpson');
partialPrint('Homer');
partialPrint('Marge');
partialPrint('Bart');
partialPrint('Abe');
partialPrint('Maggi');

Here we are not working with classes or objects so reference of ‘this’ keyword is not required and hence passed as null. Output of above code is shown below.

Hello, my name is Homer Simpson
Hello, my name is Marge Simpson
Hello, my name is Bart Simpson
Hello, my name is Abe Simpson
Hello, my name is Maggi Simpson

Creating our own implementation of bind()

Now coming to the main topic. Below are the steps we must consider while creating our own bind() implementation.

• In simple terms bind() is also a function with specific return type and parameters.
• bind() returns a function and our implementation should do the same.
• we should be able to pass parameters in bind() call as well as the partial function call and later merge both parameters.
• we should be able to set the context of ‘this’ when required.
• All functions should be able to access our implementation of bind.
• To refer the function that calls our bind method, we get it in the ‘this’ keyword.

As discussed earlier we can make use of existing functions along with our own logic. So here we can use either call or apply.

Function.prototype.mybind = function(context, ...args) {
 let func = this;
 return function(...inner_args) {
  func.apply(context, [...args,...inner_args]);
  }
}

The above code handles all points mentioned above. For extracting the parameters & merging them we are using the rest & spread operators here. These are basic operation of accessing the parameters and merging 2 arrays, you can accomplish it using any logic you like.

Since we are working with arrays, I have used apply() instead of call(). On usage of our implementation the output should be same.

const partialPrint = printFullName.mybind(null, 'Simpson');
partialPrint('Homer');
partialPrint('Marge');
partialPrint('Bart');
partialPrint('Abe');
partialPrint('Maggi');

Output in terminal (Node.js)

That’s all for this post, If it helped you out share the knowledge. Feedback is welcome, in case of any mistake do reach out. Thanks for reading.