Ajay YadavThe call() method in JavaScript allows us to invoke a function with a specified value for this keyword and arguments provided individually. It is useful for explicitly setting the context for a function or passing arguments one by one. It is also a frequently asked question in interviews. That’s why it’s very essential to know about this method. Now let’s get into the blog the right way.
What is call() method
The call() method invokes a method (or a function) from the owner object. An object can invoke a method that belongs to another object using the call() method. Let’s take an example:
I’ve created an object called creator1. Inside this object, there are 3 properties, and the last one is a method (function) of the object. So, how do I call this function that is kept inside this object?
let creator1 = {
name: “Ajay Yadav”,
niche: “Front-end developer”,
intro() {
console.log(`${this.name} is a ${this.niche}.`);
},
};
It is so simple, We can call this function using the dot (.) operator followed by parentheses ().
creator1.intro(); // Ajay Yadav is a Front-end developer.
Now let’s suppose there is another object called creator2. And if we want to access the same method or function of the first creator1 object, then how can we do it?
Well, here we can leverage the power of the call() method without having it in the second creator2 object. But before implementing it, let’s see the syntax.
Syntax of the call() method
Here is the syntax of the call() method:
functionName.call(thisArgs, Arg1, Arg2, Arg3,…,ArgN);
Syntax explanation:
- functionName: A function that is kept inside the owner object.
- thisArgs: It’s a new object in which we are going to use the owner object’s method.
- Arg1, Arg2, Arg3,…,ArgN: These are the arguments passed into the method of the owner object.
NOTE: Functions are first-class-citizens in JavaScript. That’s why we can assign a function to a variable as a value but without parentheses. Such as:
const sum = function (a, b) {
return a + b;
};
const assignedFunction = sum;
How to implement the call() method
Coming back to the previous example, To extract the method of the object, we need to keep it in another variable. And we already know that we can assign a function to a variable as a value.
- So, first of all, we need to assign the method of the owner object into a separate variable, but without parentheses. We are not going to call the function instead, we are storing the function as a value in a variable. Such as:
creator1.intro; // It’s a function as a value.
- Now we have to invoke the call() method using the dot(.) operator followed by the name of the function with parentheses. Like:
creator1.intro.call(); // Invoking the call() method.
- And in the next step, we need to pass the new object in which the owner object’s method is being used as the argument of the call() method.
creator1.intro.call(creator2); // Pointing the “this” keyword to the creator2 object.
- Finally, if the method of the owner object received any parameters, then it needed to pass them as the second, third, … arguments of the call method.
creator1.intro.call(creator2, arg1, arg2,…, argN); // Passing arguments.
Since in our case, there are no requirements for any arguments to the call() method, that’s why we did not pass any second arguments to it.
Here is the complete code:
let creator1 = {
name: “Ajay Yadav”,
niche: “Front-end developer”,
intro() {
console.log(`${this.name} is a ${this.niche}.`);
},
};
creator1.intro(); // Ajay Yadav is a Front-end developer.
let creator2 = {
name: “Gulam Anas”,
niche: “Flutter developer”,
};
creator1.intro.call(creator2); //Now the “this” keyword is pointing to the “creator2” object.
creator2.intro(); // Gulam Anas is a Flutter developer.
Pass an argument to the call() method
Let’s suppose I want to pass 24_000 as the argument to the object’s method. In this example, 24_000 is an argument that is passed to the intro() function.
let creator1 = {
name: “Ajay Yadav”,
niche: “Front-end developer”,
intro(followers) {
console.log(
`${this.name} is a ${this.niche} and he has ${followers} followers.`
);
},
};
let creator2 = {
name: “Gulam Anas”,
niche: “Flutter developer”,
};
creator1.intro.call(creator2, 6_000); //Now the “this” keyword is pointing to the “creator2” object.
We can also pass more than one argument by the call() method to the object’s method, here is how:
let creator1 = {
name: “Ajay Yadav”,
niche: “Front-end developer”,
intro(followers, platform) {
console.log(
`${this.name} is a ${this.niche} and he has ${followers} followers on ${platform}.`
);
},
};
let creator2 = {
name: “Gulam Anas”,
niche: “Flutter developer”,
};
creator1.intro.call(creator2, 6_000, “Twitter”); //Now the “this” keyword is pointing to the “creator2” object.
Let’s improve the code
Since functions are first-class-citizen in JavaScript that’s why we can store them into a variable. Now we do not need to use the dot (.) operator twice. So, the intro() function is now assigned to the creatorMethod variable. Like:
let creator1 = {
name: “Ajay Yadav”,
niche: “Front-end developer”,
intro(followers, platform) {
console.log(
`${this.name} is a ${this.niche} and he has ${followers} followers on ${platform}.`
);
},
};
const creatorMethod = creator1.intro; // But without parenthese.
let creator2 = {
name: “Gulam Anas”,
niche: “Flutter developer”,
};
creator1.intro.call(creator2, 6_000, “Twitter”); //Now the “this” keyword is pointing to the “creator2” object.
creator1.intro(24000, “Twitter”) === creatorMethod(24000, “Twitter”) ?
Is it both declarations are the same thing? What do you think?
Well, NO…
const creatorMethod = creator1.intro; // Assign the method to a variable.
creatorMethod(24000, “Twitter”); // But in case “this” is not pointing to anywhere, in result undefined.
creator1.intro(24000, “Twitter”); // “this” points to the “creator1” object.
Let’s discuss more about it:
creator1.intro(24000, “Twitter”);
When you call creator1.intro(24000, “Twitter”);, you are directly invoking the intro method on the creator1 object. In this context, the this keyword inside the intro method refers to the creator1 object, and the method executes successfully.
creatorMethod(24000, “Twitter”);
However, when you assign the creator1.intro method to the creatorMethod variable and then try to call creatorMethod(24000, “Twitter”);, the context (the object to which this refers) is lost.
In this case, creatorMethod is treated as a regular function, and the this keyword is no longer associated with any object. Therefore, the code will not work as expected because of this.name and this.niche inside creatorMethod will not refer to any specific object, and it will result in an error.
But to make the creatorMethod call work properly, you can use the call() method here as well, as you did in your creator2 object.
creatorMethod.call(creator1, 24000, “Twitter”);
Separate everything, then apply call()
There is no need to put a method or function inside an object; instead, any function can be used as a method of the object.
According to me, we can say that the call() method defines the direction of the this keyword.
// Separate function
const intro = function (followers, platform) {
console.log(
`${this.name} is a ${this.niche} and he has ${followers} followers on ${platform}.`
);
};
// Object 1
let creator1 = {
name: “Ajay Yadav”,
niche: “Front-end developer”,
};
// Object 2
let creator2 = {
name: “Gulam Anas”,
niche: “Flutter developer”,
};
// Using the call(), the “this” keyword points to the desired object according to our needs.
intro.call(creator1, 24000, “Twitter”);
intro.call(creator2, 6000, “Twitter”);
Conclusion
To conclude, the call() method is a crucial part of JavaScript, as it allows us to control the context in which functions are executed. Its importance lies in its ability to improve code readability, maintainability, and the overall design of JavaScript applications. As developers continue to explore the intricacies of the language, mastering the use of call contributes to a more comprehensive understanding of JavaScript’s capabilities.
Also, if you are looking for a JavaScript or React job, please search for them on Talent500.co
Adarsh M
Add comment