Overview of JavaScript Call Function
Calling a function in JavaScript is similar to other programming languages, like calling function/ method by name and passing arguments enclosed with parenthesis. This JavaScript function call() method is predefined which is used to write methods for different objects and used to call a function that contains this value and arguments provided individually. Call() provides a new value of this to the function.
Syntax:
function.call(thisArg, arg1, arg2,…..argn);- Parameters thisArg is optional and refers to this value given to call the function, in some cases thisArg may not be the actual value seen by the method.
- arg1, arg2,…. Are the arguments for the function.
- This method returns the result of the function called along with this value and arguments.
- With call(), an object can use another method that belongs to another object, with call(0, a function can be written once and then inherit in another object without rewriting.
- The call() function is somewhat similar to apply() method, the difference appears with the arguments, call() method accepts argument list while apply() accepts a single array of arguments.
Examples of JavaScript Call Function
Given below are the examples of JavaScript Call Function:
Example# 1
Code:
<!DOCTYPE html>
<html>
<body>
<script>
function Emp(empid,empname) {
this.empid = empid;
this.empname = empname;
}
function Employee(empid,empname) {
Emp.call(this,empid,empname);
}
document.write(new Employee(123,"Karthick Reddy").empname);
</script>
</body>
</html>Output:
Employee function calls the other function Emp using call() method where this keyword along with arguments are passed.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<p id="multiply"></p>
<script>
function multiFunction(x, y) {
return x * y;
}
var multiple = multiFunction.call(multiple, 27, 2);
document.getElementById("multiply").innerHTML = multiple;
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var employee = {
details: function() {
return this.firstName + " " + this.lastName + " has id " + this.id;
}
}
var employee1 = {
firstName:"Karthick",
lastName: "Reddy",
id: "234"
}
var employee2 = {
firstName:"Saideep",
lastName: "Reddy",
id: "345"
}
var x = employee.details.call(employee2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output:
Example #4
Let’s check out the call() method with arguments.
Code:
<!DOCTYPE html>
<html>
<body>
<p id="sample"></p>
<script>
var employee = {
details: function(city, country) {
return this.firstName + " " + this.lastName + " lives in " + city;
}
}
var employee1 = {
firstName:"Karthick",
lastName: "Reddy"
}
var employee2 = {
firstName:"Saideep",
lastName: "Reddy"
}
var x = employee.details.call(employee2, "Alberta");
document.getElementById("sample").innerHTML = x;
</script>
</body>
</html>Output:
Example #5
Let us see how an anonymous function can be invoked using the call() method.
Here, we shall create an anonymous function and use call() to invoke, it helps to add a print() function to each object which helps in printing the index of the element in the array.
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const employees = [
{ domain: 'Retail', name: 'Karthick' },
{ domain: 'Banking', name: 'Saideep' }
];
for (let i = 0; i < employees.length; i++) {
(function(i) {
this.print = function() {
document.write(i + ' ' + this.domain
+ ' lead is ' + this.name + '</br>');
}
this.print();
}).call(employees[i], i);
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output:
Example #6
Let us see how to invoke the function using the call() method without specifying the first argument.
If the user does not pass the first argument to the call() function, then the value of these changes to the global object and the value is then displayed.
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var empName = 'Karthick';
function display() {
document.write('Employee Name is ', this.empName);
}
display.call();
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output:
Example #7
By using ‘strict mode’
Syntax:
'use strict';In strict mode, this value can’t be considered as a global object, and the value of this will be undefined i.e. value cannot be read.
Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
'use strict';
var empName = 'Karthick';
function display() {
document.write('Employee Name is ', this.empName);
}
display.call();
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Output:
.call() function forces the value whichever is present in this on the method for which .call() is applied
Example #8
Code:
<!DOCTYPE html>
<html>
<body>
<p id="sample"></p>
<script>
var sayHello = function(){
document.write('Hello, ' + this.firstName);
};
var sayGoodbye = function(){
document.write('Goodbye, ' + this.firstName);
};
var employee1 = {
firstName:"Karthick",
lastName: "Reddy",
age: '24'
}
var employee2 = {
firstName:"Saideep",
lastName: "Reddy",
age: '23'
}
document.write('with call() method');
document.write('</br>');
sayHello.call(employee1);
document.write('</br>');
sayGoodbye.call(employee2);
document.write('</br></br>');
document.write('with apply() method');
document.write('</br>');
sayHello.apply(employee1);
document.write('</br>');
sayGoodbye.apply(employee2);
</script>
</body>
</html>Output:
Both call() and apply () method run sayHello() and sayGoodbye() in the scope of employee1 and employee2 and all do the same thing. These functions can be called only on other functions, the difference comes only when the user wants to fill this call with a set of arguments. Call() method is limited to simple method calls but when the user wants to write the code wherein the number of arguments needed by the function are not known, there comes apply() method.
Call() takes in arguments one-by-one whereas apply() takes in arguments as an array. Through the call() method, in addition, to pass this as the first argument, the user can also pass additional values, each additional value is an additional argument to call() method.
Conclusion
We got to know how to call a function in javascript, what exactly the call() method is and what it does for easing user’s code quality. Whenever we work with functions, should be aware of the keyword ‘this’. Were able to compare the differences between call() and apply() method along with some live examples on anonymous call functions, call() method with arguments, call() without specifying the first argument and also with ‘use strict’ statement.