What is call and apply ? and why we need them ?
I know this is the first question which comes to our mind🤯
Lets understand this with an example
let personOne = {
firstName: "Vipin",
lastName: "Chandra"
sayHi: function () {
console.log(" Hey myself " + this.firstName + " " +
this.lastName);
}
};
let personTwo = {
firstName: "Kunal",
lastName: "verma",
sayHi: function () {
console.log(" Hey myself " + this.firstName + " " +
this.lastName);
}
};
personOne.sayHi() // Hey myself Vipin Chandra
personTwo.sayHi() // Hey myself Kunal verma
We have sayHi() method in two person object separately ,Now imagine how many times we have to write the same function again and again for every new person object.
Waste of time right ?
call( ) is a built-in method to a function which helps us to call a function with given context (this).
what will happen if we take sayHi( ) out of person object ?
It will not work obviously.
let personOne = {
firstName: "Vipin",
lastName: "Chandra"
};
let sayHi = function() {
console.log(" Hey myself " + this.firstName + " " +
this.lastName);
}
sayHi();
// error // this is undefined or refer to window object here.
By using call( ) we can add a context(this) to the function sayHi( )
Syntax of call( )
method.call(refrence*,arg,arg)
sayHi.call(personOne);
//Hey myself Vipin Chandra
// you can call it multiple time by just changing the refrence
sayHi.call(personTwo)
//Hey myself Kunal verma
And this worked.
apply( ) is just the same as call( ) the only little difference between them is the way the argument get passed.
Syntax of apply( )
method.apply(refrence*,[arg1,arg2])
let sayHi = function(state , city) {
console.log(" Hey myself " + this.firstName + " "
this.lastName +" from "+state + " , " + city);
}
sayHi.call(personOne,"uttarakhand","almora")
//Hey myself Vipin Chandra from uttarakhand , almora
sayHi.apply(personOne,["uttarakhand","almora"])
// The array get destructured state = uttarakhand ,city = almora
//Hey myself Vipin Chandra from uttarakhand , almora
Bind( ) work the same as call and apply but it does not call the function immediately instead it returns a function with fixed context(this) and fixed arguments if provided
let introOne = sayHi.bind(personOne,"uttarakhand","almora");
// call it later on
introOne( )
//Hey myself Vipin Chandra from uttarakhand , almora
// it will get executed in context of personOne object
Function cannot be Rebound
let introOne = sayHi.bind(personOne,"uttarakhand","almora").bind(personTwo,"punjab","jalandhar");
introOne( );
// //Hey myself Vipin Chandra from uttarakhand , almora
Thanks for your Read.
You can also check out my other blogs on javascript.
Top comments (0)