Blog/NotesConcept

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

A brief description of the "call" method in JavaScript and a step-by-step explanation of how to create call Polyfill in JavaScript by understanding its internal implementation.

Intermediate

Anuj Sharma

Last Updated Nov 30, 2024


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

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Other Related Blogs

Apply Polyfill in JavaScript: Step by Step Explanation (For Interview)

Anuj Sharma

Last Updated Nov 29, 2024

Understand how the apply method works in JavaScript and cover step by step-by-step explanation of the apply method polyfill in JavaScript to understand its internal implementation.

Explained Web Authorization Techniques - Session & JWT

Anuj Sharma

Last Updated Nov 24, 2024

Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)

5 Ultimate Rules to master this keyword in JavaScript

Anuj Sharma

Last Updated Nov 22, 2024

Easy to understand 5 rules, that cover the behaviour of the "this" keyword in different contexts and helps you to master this keyword for any javascript interview.

Ultimate guide to REST API calls using Fetch: Machine Coding Essential

Vivek Chavan

Last Updated Sep 15, 2024

You will get a clear understanding about working with any rest api and common concepts asked during interviews

What is CORS ? Cross-Origin Resource Sharing Explained [For Interviews]

Anuj Sharma

Last Updated Dec 10, 2024

A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.

Bind Polyfill in JavaScript: Step by Step Explanation

Ram V

Last Updated Nov 30, 2024

A concise explanation of the bind method in JavaScript, followed by a step-by-step exploration of how to create bind polyfill in JavaScript by understanding its internal implementation.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved