Javascript call() & apply() methods Explained

In the last segment you learnt about bind(), now let's learn about two more functions who can perform the same function as bind().

In the last video, you looked at the call() method. Like bind() method, you can also pass multiple arguments to the call() method but the first argument need to be the context. The bind() and call() methods differ from each other on the basis of the fact that you explicitly need to call the function on which the bind() method is applied. This is because the bind() method returns the function which needs to be called later. However, you do not need to do so in case of the call() method. The function on which you apply the call() method is invoked implicitly when the control reaches it. Thus, you do not need to explicitly call the function on which you apply the call() method.
 

Well, there’s yet another method which you can use to solve the problem of ‘this’ keyword in JavaScript. Too many solutions for a single problem, right? Let’s look at this method in the next video.

You looked at how the apply() method works in the last video. Now, were you able to identify the difference between the call() method and the apply() method. Well, the only difference between the call() method and apply() method is that call() method accepts arguments passed individually and separated with a comma, as seen earlier. On the other hand, the apply() method is called with an array of arguments. The receiving function, which is the function on which the call() method or the apply() method is used, behaves the same in both the cases. It accepts the parameters individually separated by comma.
 

Let’s look at the summary of all these methods in the next video.

Thus, you looked at the bind(), call() and apply() method to solve a common problem. Following are the code snippets that you saw in the video to solve the problem with the ‘this’ keyword using each of these methods:
bind() method:

var person = {
 firstName: "Sakshi",
 lastName: "Jain",
 get: function() {
   console.log("Outer: " + this.firstName + " " + this.lastName);
   var print = function() {
     console.log("Inner: " + this.firstName + " " + this.lastName);
   }.bind(this, "Developer", "JavaScript");
   print();
 }
};

person.get();

call() method:

var person = {
 firstName: "Sakshi",
 lastName: "Jain",
 get: function() {
   console.log("Outer: " + this.firstName + " " + this.lastName);
   var print = function(role, language) {
     console.log(role, language);
     console.log("Inner: " + this.firstName + " " + this.lastName);
   }.call(this, "Developer", "JavaScript");
 }
};

person.get();

apply() method:

var person = {
 firstName: "Sakshi",
 lastName: "Jain",
 get: function() {
   console.log("Outer: " + this.firstName + " " + this.lastName);
   var print = function(role, language) {
     console.log(role, language);
     console.log("Inner: " + this.firstName + " " + this.lastName);
   }.apply(this, ["Developer", "JavaScript"]);
 }
};

person.get();

All the above code snippet give the same output, as follows:

Output:

Outer: Sakshi Jain
Developer JavaScript
Inner: Sakshi Jain