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.
Anuj Sharma
Last Updated Nov 30, 2024
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);
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
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.
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;
};
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.
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)
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.
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
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.
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.
© 2024 FrontendGeek. All rights reserved