What is call(), bind() and apply() in JavaScript?

What is call(), bind() and apply()?

As we know in the JS, everything is an object. So we can accessa and add properties in the objects and functions. We also know that every function gets this property automatically. this is used inside a function, and will always refer to a single object. So we use call(), bind() and apply() to get the this of another function and use their properties with our functions. Basically we borrow the method using this for some point of time.

Not everythig is an object in JS, we can say almost everything. Later I'll show you how not everything is an object. So be with this tutorial.

call():

The call() method calls a function with a given this value and arguments provided individually. The syntax of the call() is almost identical to that of 'apply()'. The fundamental difference is that 'call()' accepts an argument list while 'apply()' accepts a 'single array of arguments'.
Syntax:

function.call(thisArg, arg1, arg2, ....., argn);

Return Value: Specified 'this' value and arguments.
Examples:

                    
                        var Person = {
                            firstname: 'Shubham',
                            lastname: 'Verma',
                            getPerson: function() {
                                var fullname = this.firstname + ' ' + this.lastname;
                                return fullname;
                            }
                        };
                        
                        var getPerson = function(tech1, tech2) {
                            console.log(this.getPerson() + ' loves ' + tech1 + ' and ' + tech2);
                        };
                        
                        console.log(getPerson.call(Person,'JS', 'algorithms')); // Shubham Verma loves JS and algorithms
                     

Or:

                         function greet(){
                             const reply=`${this.employee} has an awesome ${this.role}`;
                             console.log(reply);
                         }
                    
                         const newObj={employee:'Shubham Verma',role:'JS Developer'};
                         console.log(greet.call(newObj));  // Shubham Verma has an awesome JS Developer
                    

apply():

The apply() method also borrows the function and sets the 'this' value in the function invocation. In addition, the apply() in particular allow us to execute a function with an array of paremeters, such that each parameter is passed to the function individually when the function executes.
The apply() calls a function with a given 'this' value and 'arguments' provided as an array.

The syntax of the function is almost identical to the call(), the fundamental difference is that the call() accepts the argument as comma seperated but in the apply(), this accepts an array of arguments.

Syntax:

function.apply(thisArg, [arg1, arg2, ....., argn]);

Return Value: Specified 'this' value and arguments.
Examples:

                    
                                var Person = {
                                    firstname: 'Shubham',
                                    lastname: 'Verma',
                                    getPerson: function() {
                                        var fullname = this.firstname + ' ' + this.lastname;
                                        return fullname;
                                    }
                                };
                                
                                var getPerson = function(tech1, tech2) {
                                    console.log(this.getPerson() + ' loves ' + tech1 + ' and ' + tech2);
                                };
                                
                                console.log(getPerson.apply(Person,['JS', 'algorithms'])); // Shubham Verma loves JS and algorithms
                             

Or:

                                 function greet(){
                                     const reply=`${this.employee} has an awesome ${this.role}`;
                                     console.log(reply);
                                 }
                            
                                 const newObj={employee:'Shubham Verma',role:'JS Developer'};
                                 console.log(greet.apply(newObj));  // Shubham Verma has an awesome JS Developer
                            

Or:

                                const person = {
                                    fullName: function(city, country) {
                                      return this.firstName + " " + this.lastName + "," + city + "," + country;
                                    }
                                  }
                                  
                                  const person1 = {
                                    firstName:"John",
                                    lastName: "Doe"
                                  }
                                  
                                  person.fullName.apply(person1, ["Shubham", "Verma"]); // "John Doe,Shubham,Verma"
                            

bind():

bind() is a bit different from call() and apply(). It returns a new function associated with binded 'this' while call() and apply() execute the current function Immediately. bind() is great for lot of things:
* We can use bind() for curry functions.
* We can eaisily reuse and we can call whenever it required.
* We can store the reference of the executable functions and later can we call.
* We can also use bind() for events like onClick() where we don't know when they will be fired but know what context we want them and how.
* We can change the context as per the requirements.

Examples:

                                        const fullName = function(hometown,state){
                                            console.log(`${this.firstName} ${this.lastName} from ${hometown} ${state}`);
                                        };
                            
                                        const names={
                                            firstName:'Shubham' ,
                                            lastName:'Verma'
                                        }
                                        
                                        const print=fullName.bind(names,'Gurgaon','Haryana');
                                        /* The above line will return a function, it will not directly call a function like call() and apply(). */
                                        
                                        console.log(print()); // Shubham Verma from Gurgaon Haryana
                                     

---

Conclusion:

In this article, we learned about What is call(), bind() and apply()?, We have implemented all these concepts very well. Now we can use call(), bind() and apply() in our projects.