Call, Apply, and Bind in JavaScript: When and How to Use Them

In javascript, function are first class citizens, meaning they can be treated like any other variables. This flexibility allows us to manipulate them in various ways. However, when working with the complex objects controlling the value of this becomes very crucial. This is where call, apply,bind comes into play.

Call, apply and binds are also called as sharing methods. Basically, if there are 2 objects and i want to share a method from one object with other one we will use sharing method. If anyone don't know what is method for them it's nothing but a function inside an object.

const student = {
                 name:'Raj',
                 printName: function(){
                              console.log(this.name)
                             } 
                }
const student2 = {
                 name:'Harry',
         }

Now, i want to share printName of student with student2 then??

ex. student2.printName() //error

else i can make another method in student2 as printName but it's not a good way if the method is doing the same logic rather than we can reuse the method from anotherobject, we can borrow function from other object and use it with data of own object. So, when we talk about using other object methods into our new object that's where use of call comes into play.

//1st Take the function which needs to be called
student.printName //each & every method in JS has an access to call()
//call() takes 1st argument as reference like what we want to be pointing to
// here we want to point to student2 object
student.printName.call(student2) //output as Harry
//so call will bind to the reference object and give access to all the 
//properties of objects
student.printName(); //output as Raj

However in general case we dont keep the methods inside objects, if we want to reuse them, rather we take them off & keep outside.

let printName = function(){
                console.log(this.name)
                }
// here we will call directly to the function pass reference of object as args
printName.call(student2) // output Harry
//However, if we want to pass another args to it then first we will pass 
//reference obj,after that function args
let printName = function(age,city){
                console.log(this.name+ " "+ 'age : '+age+" from "+city)
                }
printName.call(student2, 25,'Delhi')

So, that was all about the call method, and the only difference between call and apply is how we pass the arguements, 1st will be reference to the object and 2nd will be arraylist not individual args.

// using apply method
printName.apply(student2, [25,'Delhi']);

Now, let's move to bind method , bind method looks exactly the same as call method but the only difference between them is instead of directly calling the method, it binds the method with the object and returns us the copy of the method.So, rather than invoking directly we can get a copy of it and invoke later on.

let myName = printName.bind(student2,25,'Delhi');
console.log(myName) // returns us copy of printName function
//this is used just to bind and keep a copy of it so that we can use it later
myName(); // name: harry, age:25, from:delhi

So, these call, apply, bind allow for powerful manipulation of function contexts and arguments, making your JavaScript code more versatile and flexible.

Explain Call, Apply, Bind methods in Javascript