call(), apply() and bind() methods in Javascript

Suppose we have an object as the name

let name = {
firstName: "Ahsan",
lastName: "Hyder",
printFullName: function(){
console.log(this.firstName + " " + this.lastName)
}
}
name.printFullName()
//Ahsan Hyder

Now let us suppose we have another object as the name2

let name2 = {
firstName: "Nrupul",
lastName: "Dev"
}

One way to print firstName and lastName can be to copy the printFullName inside the name2 and do as above but it is not the right way to do so.

Here call( ) method comes into picture.

call( )- The call( ) allows for a function/method belonging to one object to be assigned and called for a different object.

Using the call method we can do a function borrowing.
We can borrow a method from some object and use it with the data of some other object. In our case, we are borrowing for name2.

We can do like following-
Call the function and pass the reference to which we want our “this” to be pointing.

name.printFullName.call(name2)
//Nrupul Dev

Although we can do like above.

However, we don’t generally keep our methods inside a function as we have done above.

let name = {
firstName: "Ahsan",
lastName: "Hyder",
}
let printFullName=function(){
console.log(this.firstName + " " + this.lastName)
}
printFullName.call(name) 
//Ahsan Hyder
//If we have some other object like name2
let name2 = {
firstName: "Nrupul",
lastName: "Dev"
}
printFullName.call(name2) 
//Nrupul Dev

From the above code snippet, we can see how easily we can do things now.

What if we had more parameters inside printFullName like below-

let name = {
firstName: "Ahsan",
lastName: "Hyder",
}
let printFullName=function(hometown,gender,hobbies,job){
console.log(this.firstName+" "+this.lastName+" "+ "from" +" "+hometown+" "+gender+" "+hobbies+" "+job)
}
printFullName.call(name, "Srinagar", "Male", "Cooking", "Software Developer")
//Ahsan Hyder from Srinagar Male Cooking Software Developer

So what do we understand from above??

In call( ), we pass arguments individually.

apply( )- The apply method is the same as the call method, the only difference between call and apply is the way how we pass the arguments. In case of apply( ), we pass them as a list as shown below.

let name = {
firstName: "Ahsan",
lastName: "Hyder",
}
let printFullName=function(hometown,gender,hobbies,job){
console.log(this.firstName+" "+this.lastName+ " "+ "from" +" "+hometown+" "+gender+" "+hobbies+" "+job)
}
printFullName.apply(name,["Srinagar","Male", "Cooking", "Web Developer"])
//Ahsan Hyder from Srinagar Male Cooking Web Developer

Check above the arguments are passed as a list.

bind( )-bind method looks similar to call but instead of directly calling the method, the bind method binds the printFullName with an object and returns a copy of that.

Note- I am using the above code snippet(for reference)

let printMyName=printFullName.bind(name2)

What it will do is that it will create a copy of printFullName and it will bind that with name2 object and will return a function that can be called later.
We pass the parameters individually.

How was the article?

Clap: if you enjoyed reading this article, so others can find it
Comment: if you have a question/suggestion you’d like to ask