Call, Apply, Bind – Understanding Basic Concepts of JavaScript

In programming languages, you have a this keyword. The “this” keyword lets you refer to an object from within that object. “this”‘s value will change depending on the context that “this” is called in. By default it refers to the global scope, but when called within a function, it refers to that function.

Note - To understand call, apply, and bind you need to have good knowledge of how "this" works in JavaScript.

call(), apply(), and bind() can refer "this" to object.

 This let's you to change the context of this when you invoke the function. It depends on how we are invoking the function.

1) Call:

Call method takes input as an String args comma seperated. call() provides a new value of this to the function/method. With call(), you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

                ex -

                const commonMethods = {

    fullname : function(city,state){

        return this.fname + " " + this.lname + " Lives in " + city + " - " + state;

    }

                }

                const Hero_1 = {

                    fname : "Tony",

                    lname : "Stark"

                };

                const Hero_2 = {

                    fname : "Steve",

                    lname : "Rogers"

                }

                const Hero_1_Details = commonMethods.fullname.call(Hero_1,"Malibu Point","USA");

                const Hero_2_Details = commonMethods.fullname.call(Hero_2,"Washington, D.C.","USA");

                console.log(Hero_1_Details);

                console.log(Hero_2_Details);

2) Apply:

It is same as call but different in passing the arguments in. The apply() method calls the specified function with a given this value, and arguments provided as an array (or an array-like object). apply() accepts a single array of arguments — for example, func.apply(this, ['eat', 'bananas']);

                ex :

                                const commonMethods = {

    fullname : function(city,state){

        return this.fname + " " + this.lname + " Lives in " + city + " - " + state;

    }

                }

                const Hero_1 = {

                    fname : "Tony",

                    lname : "Stark"

                };

                const Hero_2 = {

                    fname : "Steve",

                    lname : "Rogers"

                }

                const Hero_1_Details = commonMethods.fullname.apply(Hero_1,["Malibu Point","USA"]);

                const Hero_2_Details = commonMethods.fullname.apply(Hero_2,["Washington, D.C.","USA"]);

                console.log(Hero_1_Details);

                console.log(Hero_2_Details);

3) Bind:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. With the bind() method, an object can borrow a method from another object.

                const Hero_1 = {

                    fname : "Tony",

                    lname : "Stark",

                    fullname : function(city,state){

                        return this.fname + " " + this.lname + " Lives in " + city + " - " + state;

                    }

                };

                const Hero_2 = {

                    fname : "Steve",

                    lname : "Rogers",

                    showSuperPower : function(power){

                        return `Super Power is ${power}`

                    }

                }

                // here we have interchanged the function of each other. (showSuperPower and fullname)

                const Hero_2_Details = Hero_1.fullname.bind(Hero_2);

                console.log(Hero_2_Details("Washington, D.C.","USA"));

                // Or

                const Hero_1_Details = Hero_2.showSuperPower.bind(Hero_1);

                console.log(Hero_1.fullname("Malibu Point","USA") + " - and " +Hero_1_Details("Can Fly"));

Pros of using call apply bind:

1. Code duplication removed.
2. We can create a new function and bind with existing.
3. Readability improves.

Cons of using call apply bind:

Basic concepts of Scops and "this" keyword must be strong else find hard to read and debug

Conclusion:

From the article, we've explored the foundational concepts of JavaScript. We'll be adding more articles soon to delve deeper into the subject.

Thank you for reading!