Introduction to JavaScript Apply
Javascript apply is the method that helps us to call a function that sets the passed value or the object that is specified as the “this” keyword which is referred to as the current referencing object whenever the apply method is called and the array of the arguments that you want to pass to that function as the second parameter. Javascript apply and call methods might seem to be similar in working. However, there is one difference between the two. The call() method accepts the arguments in the comma-separated format while the apply() method expects the argument list to be specified in the array format as the second argument of the function call.
Syntax:
mainFunction.apply(argumentForThis,[argument1,argument2,...argumentN])We can see that after using apply for your function it results in the calling of the function with the specified argument to be referenced by the “this” keyword and the arguments are passed to the function as specified in the array in the second parameter. The syntax of the apply function is as defined below –
- argumentForThis: This parameter to the application function references the “this” keyword of javascript to the argument that is passed as the first argument to apply function. ArgumentForThis is the value that will be further passed as the “this” parameter while calling the target function that in our syntax is mainFunction when the function is called. It is a compulsory value and needs to be mentioned. If the non-strict mode is on and the value of ArgumentForThis is mentioned as null or undefined then it is considered to be the global object that is further referred by “this” keyword.
- [argument1, argument2, …argumentN]: These are the additional arguments that you want to pass to the target function main function in our case. They should be mentioned as the array. The latest versions of javascript by ECMAScript 5 and later even support array-like arguments along with array as the second parameter to apply function. This is optional.
- Return value: The output of calling of the original main function with the specified value of the “this” keyword as the first argument and other arguments values as the initial value provided in the array parameter or array-like parameter if they are mentioned.
Functions of apply() Method in Javascript
The apply() method helps us to write the function once and make the use that function by inheriting it by multiple objects. That means a single function can be used by more than one object by specifying the different values i.e object reference as the first parameter of the apply method. The value of “this” can be specified at the time of the calling of a function.
The call() and apply() method work in the same manner. The only difference between both of them is that the call() method accepts the list of arguments in the comma-separated fashion while the apply() method wants an argument array. We can use the array literal or array object to specify the parameters to the function. Such as for example, function.apply(this, [‘javascript’, ‘mysql’]) uses the array literal while ffunctionunc.apply(this, new Array(‘javascript’, ‘mysql’)). Uses the new array object as the argument.
Since the fifth edition of the ECMAScript, the array-like objects can also be used to specify the arguments. By array-like object, we mean that any object that can have the length property to it such as NodeList or any of the custom object like the JSON format such as { ‘length’: 2, ‘0’: ‘javascript’, ‘1’: ‘MySQL’ } are also supported. The versions of the browsers that do not support the array-like objects as parameter throw an exception. The complete list of browsers and their supporting versions is given at the end of the article.
Example of JavaScript Apply
Consider a simple example to get a hold on the sayings mentioned above.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Javascript's apply method demo</h2>
<p id="demo"></p>
<script>
var company = {
fullName: function(ceo, teamcount) {
return "Name :- " + this.name + "<br> Address:- " + this.address + "<br> CEO :- " + ceo + "<br> TeamCount :- " + teamcount;
}
}
var company1 = {
name:"Capgemini",
address: "p/4, IT Park, Hinjewadi, Pune"
}
var company2 = {
name:"Infosys",
address: "p/7, IT Park, Hinjewadi, Pune"
}
var temporaryVariable = company.fullName.apply(company1, ["Paul Hermelin", 15000]);
document.getElementById("demo").innerHTML = temporaryVariable;
</script>
</body>
</html>Output:
We can observe that the company1 records are fetched and the “this” keyword references to the company1 object because we have mentioned it as the first parameter. Similarly, if we would have used
var temporaryVariable = company.fullName.call(company2, "Paul Hermelin", 15000);instead of company1 we would have got the following output because now the “this” will refer to the company2 object.
Conclusion
We can use the apply method whose full name is Function.prototype.apply() for creating the functions that can be used by multiple objects by simply inheriting them in other objects. There is no need to rewrite the same function for multiple objects. What you need to do is simply mention the value or object to be referenced by the “this” keyword as the first parameter to the apply() method.