Call Polyfill in JavaScript: Step by Step Explanation (For Interviews)

How does the call method work in JavaScript?

Call is the function's method and is available to all functions in Javascript. By default, all functions have their context. The Call method passes the dynamic context to the function so that the same function can be utilized with different contexts.

The call takes the context as the first parameter and then the function parameters can be passed in the comma-separated arguments

<function>.call(<context>, param1, param2, param3, ...paramN);

Examples

In this example, employee1 and employee2 are passed as a context followed by the function's arguments role and company in comma comma-separated fashion.

// function
function getEmployeeInfo (role, company) {
  console.log(
    `${this.firstName} ${this.lastName} works as ${role} in ${company}`
  );
};

// object 1
const employee1 = {
  firstName: 'Anuj',
  lastName: 'Sharma',
  age: '32',

  getAge: function() {
    console.log(`Employee age is ${this.age}`);
  }
};

// object 2
const employee2 = {
  firstName: 'Ajay',
  lastName: 'Singh',
  age: '28'
};

// Passing the employee1 context to the getEmployeeInfo
getEmployeeInfo.call(employee1, 'Engineering Manager', 'Dell');
// Output: Anuj Sharma works as Engineering Manager in Dell

// Passing the employee2 context to the getEmployeeInfo
getEmployeeInfo.call(employee2, 'Software Engineer', 'Microsoft');
// Output: Ajay Singh works as Software Engineer in Microsoft

employee1.getAge.call(employee2);
// Output: Employee age is 28

In the below example global this is passed as a context to the function

this.firstName = 'Vikas';
this.lastName = 'Kulkarni';

// function
function getEmployeeInfo (role, company) {
  console.log(
    `${this.firstName} ${this.lastName} works as ${role} in ${company}`
  );
};

getEmployeeInfo.call(this, 'Software Engineer 2', 'Zomato');
// Output: Vikas Kulkarni works as Software Engineer 2 in Zomato

Call Polyfill in JavaScript: Step by Step Explanation

Here is the step-by-step explanation of call polyfill.

It is important to note that the call method is a prototype method of the Function object in javascript, so customCall is created as part of the prototype which will override the call method and is defined as Function.prototype.customCall

Step 1: Capture the currentContext, this will be the context passed as the first parameter of the call function. In case nothing is passed currentContext gets the global context value, which is "window" in the browser & "global" in Nodejs env. globalThis will provide appropriate value as per the execution environment.

Step 2: Create a new Symbol key to avoid overriding any existing key in the currentContext (Nothing but an object).

Step 3: Assign the function's context ("this"), on which the call function is invoked. 

Step 4: Now, since the invoker function is part of the currentContext, It can access values from the current context. Now call the function and pass the arguments (comma-separated parameters got as part of the call).

Step 5: Delete the symbol key, to avoid any pollution in the currentContext.

Step 6: Return the result which got as part of function execution as the final result.

Call Polyfill Implementation:

Function.prototype.customCall = function (context, ...args) {

  // Step 1: context is the first argument, if no argument is passed then the global window object is assigned
  let currentContext = context || globalThis;

  // Step 2: Symbol() ensures that the new method won't override existing methods of currentContext
  let newProp = Symbol();

  // Step 3: assigning this to newProp of currentContext
  currentContext[newProp] = this; 

  // Step 4: call the function with passed context
  let result = currentContext[newProp](...args);

  // Step 5: Delete the Symbol key, after execution of the function in step 4
  delete currentContext[newProp];

  // Step 6: result returned by function
  return result;
};

Further reading 

👉 Bind Polyfill in JavaScript: Step by Step Explanation

👉 Apply polyfill in JavaScript: Step by Step Explanation