How to use call() apply() & bind() in JavaScript?

In this article, we will discuss how to use call() apply() & bind() in JavaScript with simple examples. Let’s see.

Rules for call() apply() & bind() in JavaScript:

1. “this” always refers to an object.

2. “this” refers to an object which calls the function it contains.

3. In the global context “this” refers to either window object or is undefined if the strict mode is used.

All three of the call, apply, and bind methods set the “this” argument to the function

• The call and apply methods set this to a function and call the function.
• The bind method will only set this to a function. We will need to separately invoke the function.

call

The call method binds the this value to the function and executes the function. It takes the this value and a list of arguments as parameters. Then, it returns the value returned by the function, which is called using the call method.

Here is the syntax of the call function:

funcName.call(Obj, arg1, arg2, …)

Where,

• funcName is a function that needs to be invoked with a different this object
• Obj is an object or a value that needs to be replaced with the this keyword present inside the function funcName
• arg1, arg2 are arguments that are passed to the invoking function with the changed this object.

Note: If you invoke a function without any Obj argument, then JavaScript considers this property to be a global object.

Example:

var bike = { 
    registrationNumber: "UP12345",
    brand: "Yamaha"
}

function bikeInfo(ownerName) {
    console.log(ownerName + ", this is your bike: " + this.registrationNumber + " " + this.brand);
}

bikeInfo.call(bike, "Avinash"); //Avinash, this is your bike: UP12345 Yamaha

In the code above, we have called the bikeInfo function using the call method. The call method will invoke the bikeInfo function with the this value as the object passed to the call method.

apply

The apply method binds the this value to the function and executes the function. It takes the this value and a single array object as parameters, and it returns the value returned by the function, which is called using the apply method.

Here is the syntax for the apply function:

funcName.apply(Obj, argumentsArray);

Where,

• funcName is a function that needs to be invoked with a different this object
• Obj is an object or a value that needs to be replaced with the this keyword present inside the function funcName
• argumentsArray can be an array of arguments, array object, or the arguments keyword itself.

As same as above example, with apply method array is passed in the function.

Example:

var bike = { 
    registrationNumber: "UP12345",
    brand: "Yamaha"
}

function bikeInfo(ownerName) {
    console.log(ownerName + ", this is your bike: " + this.registrationNumber + " " + this.brand);
}

bikeInfo.apply(bike, ["Avinash"]); //Avinash, this is your bike: UP12345 Yamaha

In the code above, we have called the bikeInfo function using the apply method and with the this value as the object passed to the apply method.

call( ) and apply( ) are identical in functionality, the only difference is that call( ) accepts a list of arguments; whereas, apply( ) accepts a single array of arguments.

bind

The bind method binds the this value to the function and returns a new function. However, we still need to separately invoke the returned function.

Here is the syntax for the bind function:

funcName.bind(Obj, arg1, arg2, …, argN);

• funcName is a function that needs to be invoked with a different this object
• Obj is an object or a value that needs to be replaced with the this keyword present inside the function func
• arg1, arg2…argN – you can pass 1 argument to the calling function or more than that, similar to the call function.

The bind function then returns a new function that consists of a new context to the this variable present inside the calling function:

Example:

var bike = { 
    registrationNumber: "UP12345",
    brand: "Yamaha"
}

function bikeInfo(ownerName) {
    console.log(ownerName + ", this is your bike: " + this.registrationNumber + " " + this.brand);
}

var userBikeDetails = bike.bikeInfo.bind(bike, "Avinash"); 

console.log(userBikeDetails)

// Avinash, this is your bike: UP12345 Yamaha

In the above code, we bind the this value for the test function and invoke the returned function from the bind method.

---

Summary

call: binds the this value, invokes the function, and allows you to pass a list of arguments.
apply: binds the this value, invokes the function, and allows you to pass arguments as an array.
bind: binds the this value, returns a new function, and allows you to pass in a list of arguments.

Read more

Event bubbling and capturing in JavaScript
How to stop events propagation in JavaScript
A Simple Explanation of JavaScript Closures