call, apply & bind methods in JavaScript - cover

call, apply & bind methods in JavaScript

If you are a regular JavaScript developer, you must have heard of the methods

call, bind & apply

Do you know what these methods are?

If the answer is no, don’t worry. By the end of this article, you will have a firm knowledge of these methods.

The “this” keyword

Consider the following method:

function someMethod() {
    console.log(this);
}

When someMethod() is executed in chrome’s console window, we get the Window object. As this keyword refers to the top level Window object in a function’s scope.

Call, bind & apply methods

All these are the JavaScript methods that are used to alter the context of this keyword in a method. Using these methods changes the reference of this keyword inside a method from Window object to another object.

To explain this statement, let’s consider the following object:

var student = {
    name: "Kunal",
    age: 23
};

Consider the following method to Register a student for some course:

function Register(course, fees){
	var studentName = this.name;
	console.log("Registered student: " + studentName);
	console.log("Course Name: " + course);
	console.log("Course Fees: " + fees);
}

Notice how we used this keyword as if it is a student object. The method above uses this.name to access the student object’s data.

But how can we achieve this? Let’s see.

When we try to call the Register function, we did not get the name printed as there is no property named name in window object:

We will get the following output:

The call method

The call method allows us to call a function by changing the context of this keyword for the single method call that we have executed with the call method.

The syntax to use call method is:

<FunctionName>.call(<objectToBindWithThis>, <FunctionParam1>, <FunctionParam2>..)

To call the Register method with the call method, we use the statement:

Register.call(student, “JavaScript”, 99);

Output:

Notice, we get the value of this.name as Kunal. You can try modifying the function to use the age property of student object as well.

For every call method, we have to send the student object to change the context of this keyword.

The apply method

Similar to call method, we can change the context of this method with apply method usage. The only difference is that we need to send function parameters as an array.

To call the Register function with apply, we use the syntax:

Register.apply(student, [ “Kunal”, 99 ]);

Output:

We get the similar output as the call method. The only difference is the syntax of using apply method.

Similar to call, the context of this keyword is updated only for the executed call.

The bind method

Similar to call & apply, bind method does the same thing but it solves the problem of sending the object in the method call every time.

The bind method call returns a new function which has the this keyword binded with the object. We can call the function any number of times to execute the code.

Syntax:

var bindedRegister = Register.bind(student);

Here, we binded the student object with the Register method & stored it in a variable named bindedRegister.

Logging the bindedRegister in the console window gives a function. This is the binded register function.

We will call the bindedRegister function with the statement below:

bindedRegister("JavaScript", 99);

Output:


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.