Easy JavaScript Part 12: What are the Call and Apply Methods?

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: 

var person = {
    name: 'dj'
};

And in addition, you have a function message as shown below: 

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:

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:

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:

1. The first parameter of both call() and apply() is the value of this object.
2. In the call() method, the other arguments to function will be passed as separate comma separated values.
3. The call() method takes zero or more individual parameters.
4. In the apply() method, the second parameter is an array.
5. The apply() method takes an array of parameter.
6. You should use the call() method when the number of function parameters is fixed.
7. You should use the apply() method, when the number of function parameters is not fixed.

Examples of call methods

As we’ve already discussed, the call() method can be used to pass the explicit value of this object and the comma separated fixed number of parameters to the function. Consider the following code: 

function foo(message) {
    console.log(message + this.name);
}
 
var p = {
    name: "dj"
}
 
foo.call(p, "hello ");

In the above code listing, you are passing an object p as the value of this in function foo. Another use of the call method is here, in the constructor chain. To illustrate this, consider the function car as shown below: 

function car(color, makingyear) {
    this.color = color;
    this.makingyear = makingyear;
}

You can pass the value of this in the car function using the call method as shown in the listing below:

function gascar(color, makingyear) {
    car.call(this, color, makingyear);
    this.type = "gas";
}
 
function electriccar(color, makingyear) {
    car.call(this, color, makingyear);
    this.type = "electric";
}

Now, when you use the gascar and electriccar functions as constructors to create an object from these functions the car function would be called with the value of this set to the newly created object. 

var ec = new electriccar("Black", 2010);
console.log(JSON.stringify(ec));
 
var gc = new gascar("Black", 2007);
console.log(JSON.stringify(gc));

In this way, the call method can be used to create a constructor chain.

Examples of apply methods

 Using the apply method, you can pass an object as value of this in a function. However, in this case, parameters are passed as a single array. There are only two parameters passed in the apply method:

1. First parameter : value of this
2. Second parameter is argument array.

 In the function, you can read the arguments array with the keyword arguments as shown in the listing below:

function foo() {
    console.log(arguments[0] + p.name + arguments[1]);
}
var p = {
    name: "dj"
}
foo.apply(p, ["Hello : ", " what's up ?"]);

In this example, the apply() method is very useful to work with inbuilt functions. Consider the following code: 

var numbers = [15, 6, 52, 34, 7];
 
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max);
console.log(min);

Here, you are calling the  Math.max and Math.min methods to find the maximum and minimum in the numbers array. 

Conclusion

In JavaScript, the call and apply methods are useful to pass different values of an object in a function. In the call method, arguments are passed separately, whereas in the apply method argument is passed as an array.

In this post, we learned about call and apply methods, but in the next post of this "Easy JavaScript" series, you will learn about another important concept of JavaScript, so stay tuned. In the meantime, don’t forget to check out Ignite UI, which you can use with HTML5, Angular, React, or ASP.NET MVC to create rich Internet applications.