DEV Community

Vipin Chandra
Vipin Chandra

Posted on

Js Interview : Bind , Call , Apply ?

#javascript #programming

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Function cannot be Rebound

let introOne = sayHi.bind(personOne,"uttarakhand","almora").bind(personTwo,"punjab","jalandhar"); introOne( ); // //Hey myself Vipin Chandra from uttarakhand , almora
Enter fullscreen mode Exit fullscreen mode

Thanks for your Read.
You can also check out my other blogs on javascript.

Top comments (0)