Js Interview : Bind , Call , Apply ?

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.