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

In JavaScript objects have their own properties and methods. With every function we have three methods: call(), apply() and bind().

Before moving into this concept, first lets have a recap on this in functions. This keyword determines how a function is called (runtime binding).

There is a feature in JavaScript which allows to use the methods of some other objects to another object without redefining them. This way of borrowing is done through call(), apply(), bind() methods.

Call(), apply(), and bind() methods are used to set the this keyword independent of function call. Useful in callbacks.

Call():

Call method sets the this inside function and immediately executes the function. Here you can pass arguments as a list.

Syntax:

function.call(thisArg, arg1, arg2, …)

function – function that needs to be invoked with different this object.

thisArg – value that needs to be replaced with this keyword present inside this function.

arg1,arg2,… – arguments passed for invoking function with this.

Example:

 function test(arg1, arg2){
   console.log(this.num, arg1, arg2); // 100, 10, 20
}

test.call({num: 100}, 10, 20);

Output:

100,10,20

apply()

apply() method binds the this value to the function and executes the function. Here  you can pass argument as an array.

Syntax:

function.apply(this, [argumentsArray])

It returns the result of the function which is invoked by this.

function test(...args){
  console.log(this.num, args);//100, [1,2,3]
}
test.apply({num: 100}, [1,2,3]);

Output:

100, [1,2,3]

Bind()

Bind() function binds this value to the function and returns new function. We need to invoke the returned function separately.

Syntax:

function.bind(this,arg1,arg2,arg3,...)

Bind returns a copy of function with this and arguments.

function test(arg){

 console.log(this.number, arg);

}

let bindedFn = test.bind({number: 1}, "Abaython");

bindedFn();

Output:

1 Abaython

Differences : call() vs apply() vs bind()

	call()	apply()	bind()
Definition	Call method is a predefined javascript method. With call an object can use a method belonging to another object. Here we supply list of arguments	Similar to call(). But here we supply array of arguments	Bind() helps in creating another function and execute later with new this function
Execution	At time of binding	At time of binding	At time when we execute the return function
Return?	Yes it returns and calls the same function at time of binding	Yes it returns and calls the same function at time of binding	Yes it returns a new function of copy of function which can be used later.
Parameter	List of arguments	Array of arguments	Array and any number of arguments

Key points to note:

• 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.