Read full article on the Infragistics blog
In JavaScript, the apply() and call() methods execute a function in the context (scope) of the first argument you pass to them. Let’s take a look at them in action to learn more. Say that you have an object person as shown below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var person = { | |
| name: 'dj' | |
| }; |
And in addition, you have a function message as shown below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function message(age) { | |
| return `Hi ${this.name}, you are ${age} years old !`; | |
| } |
Now, you have a requirement to pass the person object as the value of this in the function. In addition to explicitly passing the value of this, you also need to pass the value for the age parameter.
You can pass the context (the value of this) explicitly using by either the call() or apply() methods. Consider the following code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function message(age) { | |
| return `Hi ${this.name}, you are ${age} years old !`; | |
| } | |
| var person = { | |
| name: 'dj' | |
| }; | |
| var mes = message.call(person, 30); | |
| console.log(mes); // Hi dj, you are 30 years old ! |
Using the call method, we are passing the object person as the value of this inside message function. You can achieve the same using the apply() method as shown in the listing below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function message(age) { | |
| return `Hi ${this.name}, you are ${age} years old !`; | |
| } | |
| var person = { | |
| name: 'dj' | |
| }; | |
| var mes = message.apply(person, [30, 67]); | |
| console.log(mes); // Hi dj, you are 30 years old ! |
In JavaScript, the call() and apply() methods work in almost exactly the same way, but with a few key differences:
- The first parameter of both call() and apply() is the value of this object.
- In the call() method, the other arguments to function will be passed as separate comma separated values.
- The call() method takes zero or more individual parameters.
- In the apply() method, the second parameter is an array.
- The apply() method takes an array of parameter.
- You should use the call() method when the number of function parameters is fixed.
- You should use the apply() method, when the number of function parameters is not fixed.
Dhananjay Kumar 
Leave a comment