Call, apply, and bind in JavaScript: Examples & Polyfills

Let’s get started with an example to understand the need of these methods & then we’ll jump on their implementations.

Look at the below code, we have a person object & a printName method.

let person = {
  firstname: "Jhon",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}

<span style="font-family: 'Work Sans', Arial, sans-serif;">As you see the person object is very generic object & we can have multiple object of same type with different values. Here, I&rsquo;m using </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">this</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> keyword in </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">printName</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method. If you are not familiar with it. Don&rsquo;t worry. we&rsquo;ll cover it later.</span>

Now, we want to perform a printName method for each person object.

How to do that?

First option is that, we add the printName method to each object & call it as shown below

let person = {
  firstname: "Jhon",
  lastname: "Doe",
  printName : function (country) {
             console.log(this.firstname + " " + this.lastname 
             + " from " + country);
             }    
}

person.printName("India");

Output: 
"John Doe from India"

<span style="font-family: 'Work Sans', Arial, sans-serif;">If you see the above code. you will realise that we are duplicating the </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">printName</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method for each object. It doesn&rsquo;t seem to be a good practise. That is the reason, I&rsquo;ve defined </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">printName</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method as a seperate method in the first code block.</span>

Now, What?

Javascript provides us three methods to handle such cases without duplicating code.

1. call(object, arguments) — invokes the function on passed object along with passed arguments if there 
2. apply(object, [arguments]) — invokes the function on passed object along with passed array of arguments if there
3. bind(object, arguments) — returns a new function with referencing passed object and arguments

Let’s start with first the method.

Understand Call method in JavaScript

call() method invokes the function by taking the object on which the method has to be executed as first argument and accepts arguments which can be passed in that method like country in printName method.

It becomes equal to person.printName("India"). Where in the printName method this keyword refers to the person object. As this always refers to left side of the . on which method is being called. You can check this link to know more about this keyword.

let person = {
  firstname: "John",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}
printName.call(person, "India");

Output: 
"John Doe from India"

Here, We’ve attached call method to printName function where the printName method is called for person object therefore it takes the value of firstname & lastname from it & take “India” as parameter for country argument and results the above output.

Understand Apply method in JavaScript

apply() method is very simillar to the call method but the only difference is that call method takes the argumetns as comma seperated values where as apply method takes an array of arguments. If we write the apply method implemetation of the above code. It’ll be like this.

let person = {
  firstname: "John",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}
printName.apply(person, ["India"]);

Output: 
"John Doe from India"

<span style="font-family: 'Work Sans', Arial, sans-serif;">Here, we replaced </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">call</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> with </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">apply</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method & passed the argument in an array.</span>

let’s move to last method.

Understand Bind method in JavaScript

bind method is similar to the call method but the only difference is that call method invokes the function but incase of bind it returns a new function which can be invoked later. let’s implement bind method.

let person = {
  firstname: "John",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}
let newPrintName = printName.bind(person, "India");
newPrintName();

Output: 
"John Doe from India"

<span style="font-family: 'Work Sans', Arial, sans-serif;">If you see the above code we have attached the </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">bind</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method to </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">printName</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> & stored it into a new variable called </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">newPrintName</strong><span style="font-family: 'Work Sans', Arial, sans-serif;">.</span>

Now, we can call the newPrintName any time later in code & it will result in the same output.

Polyfill of call, apply and bind in JavaScript

let’s write the polyfills for all the three methods. I’ll be using Javascript prototype inheritance to write the polyfills. To make the polyfills available to all functions.

If you look at the all three methods. They are applied on a function so we will add our polyfill method to Function prototype. You can read about prototype here.

let’s start with call method polyfill.

✧ Call polyfill in JavaScript

let person = {
  firstname: "John",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}
Function.prototype.mycall = function(obj,...args){ 
    let sym = Symbol();                                     
    obj[sym] = this;
    let res = obj[sym](...args)
    delete obj[sym];
    return res;
}

/*
Note: Applying mycall method to printName function so this
will be equal to printName inside mycall function as 
printName is on the left side of the '.' 
*/

printName.mycall(person, "India");

Output: 
"John Doe from India"

Here, I&rsquo;ve user <strong class="markup--strong markup--p-strong">Function.prototype</strong> to make <strong class="markup--strong markup--p-strong">mycall</strong> method to be available for all the functions & assign it a new function.

Same as call method mycall method takes object on which the method has to be invoked as first argument followed by rest of the arguments need to be passed to the function.

Now, let’s understand the inner implemetation of the function.

Inside the mycall function we’ve created a symbol sym to create a unique property on the passed object to prevent existing property overwritten.

Now, On passed object added sym property & assigned the this keyword to it. which is refering to the printName function.

In the next line, We call the function by passing the remaining arguments & store it’s response in a new variable res. After this, we delete the newly created property sym from the passed object as it do not exist on the object outside this function and then we return the response of the object.

So, finally we have created our first polyfill and it results the same.

✧ Apply polyfill in JavaScript

Let’s jump on the apply method polyfill.

As we have seen apply is very similar to the call method just it takes array of arguments instead of take comma separated list of arguments. Therefore, the implementation for apply remains same as call method with a minor change.

let person = {
  firstname: "John",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}
Function.prototype.myapply = function(obj,...args){
  let sym = Symbol();                                     
  obj[sym] = this;
  let res = obj[sym](...args[0]); 
  delete obj[sym];
  return res;
}

printName.myapply(person, ["India"]);

Output: 
"John Doe from India"

If you see the above code the implementation steps are same but when we invoke the function on object instead of passing <strong class="markup--strong markup--p-strong">&hellip;args</strong> directly as argumetns. we&rsquo;ll pass the 0th index of <strong class="markup--strong markup--p-strong">args</strong> using rest operator because rest operator &lsquo;&hellip;&rsquo; represents arguments array & in this array we&rsquo;ve our passed arguments array at 0th index so will pick that array & spread that into the function.

✧ Bind polyfill in JavaScript

Let’s write the final bind method polyfill.

If we recall from bind method implementation. we know that it is same as call but instead of invoking the function return new function. Let’s see the implementation.

let person = {
  firstname: "John",
  lastname: "Doe"
}

let printName = function (country) {
  console.log(this.firstname + " " + this.lastname + " from " 
  + country);
}
Function.prototype.mybind = function(object,...args){
  let func = this;
  return function (...args1) {
    return func.apply(object, [...args, ...args1]);
  }
}

let newPrintName = printName.mybind(person, "India");
newPrintName();

Output: 
"John Doe from India"

<span style="font-family: 'Work Sans', Arial, sans-serif;">Here, Same as mycall & myapply methods. We&rsquo;ve created a mybind method on Function.prototype & assigned a function to it. This function accepts object & arguments simillar to </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">bind</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method. We already know form the above polyfill implementations that the </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">this</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> keyword referes the function. In case on bind, we&rsquo;ll store the </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">this</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> on a variable called </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">func</strong><span style="font-family: 'Work Sans', Arial, sans-serif;">. since </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">bind</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> returns a new function. we&rsquo;ll also return a anonymous function which will act as closure in </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">mybind</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> function. Now, this returing function can also accepts arguments which will represent the arguments passed during the invocation of new function returned by </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">mybind</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method. Inside this returning function, we will use </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">apply</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> method on the func variable to invoke it for passed object & arguments. In this apply method, we&rsquo;ll create an array to pass arguments & in this array we&rsquo;ll spread the </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">args</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> & </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">args1</strong><span style="font-family: 'Work Sans', Arial, sans-serif;"> to pass all the arguments to the function & store it in a new variable </span><strong class="markup--strong markup--p-strong" style="font-family: 'Work Sans', Arial, sans-serif;">newPrintName</strong><span style="font-family: 'Work Sans', Arial, sans-serif;">.</span>

Later, when we call this newPrintName. It results the same. If we pass any argument in newPrintName function, args1 represents these arguments in mybind method.

That’s all about call, apply, bind & their polyfills.

Happy learning!