All to Know About Call(), Apply(), and Bind() methods

Image of article writer

Fatima Nasser

All to Know About Call(), Apply(), and Bind() methods

Call, Apply, and Bind are important JavaScript methods that are available to all JavaScript functions. However, if not understood correctly, they might seem pretty complicated, as they often require an understanding of some fundamental JavaScript concepts, especially the this keyword.

So in this article, before diving into callapply, and bind methods, the concept of this keyword will be briefly explained.


What is 'this' keyword?


This can have more than one meaning depending on the type of referral. In this article, our main concern is when the this is used to refer to a property inside an object.

For, in an object method, this refers to the "owner" of the method. In the example below, this refers to the car object, and the car object is the owner of the getCar method.


const car ={

    brand: "Honda",

    color: "Black",

    getCar: function () {

        console.log("This is a car of color " + this.color + " and brand " + this.brand );

    }

}

car.getCar();


Therefore, when we call the getCar function the value of the properties, inside the car object, referred to by the this keyword will be displayed.

However, if we want to borrow the method and use it globally the values of the properties will return as undefined, in this case we will need one of the following methods: call , apply, or bind.


When to choose call, apply, or bind?


The callapply and bind functions are similar in terms that they enable us to set the this context. Consequently, they enable us to control the behavior of the this variable. Therefore, with the help of these methods we can now borrow a function and use it globally.


var myCar = car.getCar;

myCar();


Before it was not possible for the myCar variable to borrow the getCar method.

But now if apply the bind, apply or call we can call myCar normally. Example:


var myCar = car.getCar.bind(Car);

myCar();


One of the biggest challenges with using call , apply, and bind lies in knowing their differences and when to use them.

The call and apply invokes the function immediately and set the this context to their first argument.

The bind method, however, returns a copy of the function and sets the this context to its first argument. The new function is then invoked later. The table below sums it:



The limitations of call() quickly become apparent in cases where we do not know the amount of argument a function would take, unlike apply() that it takes an array of arguments as its second argument.



What has been mentioned above is just the starting point. Callapply and bind are used in several other advanced JavaScript design patterns such as anonymous function currying, partial functions, function binding, chaining constructors, and access the this variables in callbacks.

On an final note, check out the below video to help the ideas discussed sink with the help of detailed examples.

Be the first to comment on this article

In order to comment, please enter your information below.