In the previous post https://frontend.cloudaccess.host/bindsomething-in-javascript/, we have learned about .bind()method in the javascript. Today I gonna show you another method which also belongs to the same topic with .bind(). They are .call()and apply()method

What is .call() method

.call() is a method that helps us to invoke a function that can be used in the other object. In other words, .call()invoke the method in a different context

Usage

myFunction.call(arg1, arg2, arg3, arg4…)
– arg1: the context object which you want to invoke the function under that context
– arg2, arg3, arg4: The input params for our function

Example

We have an object person that hold 2 properties: firstName and lastName. Beside that, we also have a function for print out the value which are retrieved by this keyword

var person = {
  firstName: "Iron",
  lastName: "Man"
};
var greet = function(message) {
  return message + " " + this.firstName + this.lastName;
};

Now we want to invoke greet function with the value for this.firstName and this.lastName is retrieved in personobject. How can we do that when greet and person are separate objects and there is no relationship between them?

If you have read the article I introduced before about .bind()method, you can easily solve this problem with thisvariable by using .bind()

var person = {
  firstName: "Iron",
  lastName: "Man"
};
var greet = function(message) {
  return message + " " + this.firstName + " " + this.lastName;
};
var result = greet.bind(person) //Binding person to greet function
                  ("Hello");//Invoke the greet function which is binded with person object
console.log(result); //=> Hello Iron Man

That code is just a little bit messy when we try to bind and invoke function together. For that reason .call() were born to help us reduce the clutter code when we want to bind and invoke a function in a row. We just simply replace bind(object)(arg)to call(object,arg). Nothing can be easier than converting .bind() to .call()

var person = {
  firstName: "Iron",
  lastName: "Man"
};
var greet = function(message) {
  return message + " " + this.firstName + " " + this.lastName;
};
var result = greet.call(person,"Hello ");
console.log(result); //=> Hello Iron Man

How about .apply() method?

apply() has exactly the same purpose with call() method but one different thing is while call()receives input params separately, .apply() receive input params as an array:

Usage

myFunction.apply(arg1,[arg2,arg3,…])
– arg1: the context object which you want to invoke the function under that context
– arg2, arg3: The input params for our function

Example

var person = {
   firstName: "Iron",
   lastName: "Man"
 };
 var greet = function(startMessage, endMessage) {
   return startMessage + " " + this.firstName + " " + this.lastName+" "+endMessage;
 };
 //With .call
 var result = greet.call(person, "Hello ","We love you");
 console.log(result); //=> Hello  Iron Man We love you

//With .apply
 var result2 = greet.apply(person, ["Hello ","We love you"]);
 console.log(result2); //=> Hello  Iron Man We love you

Finally words

In with this post and the previous one https://frontend.cloudaccess.host/bindsomething-in-javascript/, you have learned about bind, calland applymethods. You have known when and why we should use it. I hope that with this knowledge, you can easily spot and give the solution whenever you got the problem with thiskeyword with function invocation. See you in the next post.

Leave a Reply

Your email address will not be published.