1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

Niladri Sekhar Dutta FOLLOW

Full stack .NET/Classic ASP/Angular2/4 developer

How-to: call() , apply() and bind() in JavaScript

Published Jun 05, 2017

In this post, we will be discussing the di erence between call() , apply() ,

and bind() methods of JavaScript functions with simple examples. As
functions are also Objects in JavaScript, these 3 methods are used to control
the invocation of the function. call() and apply() were introduced in
ECMAScript 3 while bind() was added as part of ECMAScript 5.

Uses
You can use call() / apply() to invoke the function immediately. bind()
returns a bound function that, when executed later, will have the correct
context ("this") for calling the original function. So bind() can be used when
the function needs to be called later in certain events when it's useful.

To get a grasp of "this" in JavaScript, read Understanding "This" in JavaScript.

or Function.prototype.call()
Enjoy this post?
call()  WRITE A POST
 34

https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 1/7
1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

Check the code sample below for call()

//Demo with javascript .call()

var obj = {name:"Niladri"};

var greeting = function(a,b,c){

return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};

console.log(greeting.call(obj,"Newtown","KOLKATA","WB"));
// returns output as welcome Niladri to Newtown KOLKATA in WB

The rst parameter in call() method sets the "this" value, which is the
object, on which the function is invoked upon. In this case, it's the "obj" object
above.

The rest of the parameters are the arguments to the actual function.

apply() or Function.prototype.apply()
Check the below code sample for apply()

Enjoy this post?  WRITE A POST

 34
//Demo with javascript .apply()
https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 2/7
1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

var obj = {name:"Niladri"};

var greeting = function(a,b,c){

return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};

// array of arguments to the actual function

var args = ["Newtown","KOLKATA","WB"];
console.log("Output using .apply() below ")
console.log(greeting.apply(obj,args));

/* The output will be

Output using .apply() below
welcome Niladri to Newtown KOLKATA in WB */

Similarly to call() method the rst parameter in apply() method sets the
"this" value which is the object upon which the function is invoked. In this case
it's the "obj" object above. The only di erence of apply() with the call()
method is that the second parameter of the apply() method accepts the
arguments to the actual function as an array.

bind() or Function.prototype.bind()
Check the below code sample for bind()

Enjoy this post?  WRITE A POST

 34
//Use .bind() javascript
https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 3/7
1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

var obj = {name:"Niladri"};

var greeting = function(a,b,c){

return "welcome "+this.name+" to "+a+" "+b+" in "+c;
};

//creates a bound function that has same body and parameters

var bound = greeting.bind(obj);

console.dir(bound); ///returns a function

console.log("Output using .bind() below ");

console.log(bound("Newtown","KOLKATA","WB")); //call the bound function

/* the output will be

Output using .bind() below
welcome Niladri to Newtown KOLKATA in WB */

In the above code sample for bind() we are returning a bound function with
the context which will be invoked later. We can see the bound function in the
console as below .

Enjoy this post?  WRITE A POST

 34

https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 4/7
1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

The rst parameter to the bind() method sets the value of "this" in the target
function when the bound function is called. Please note that the value for rst
parameter is ignored if the bound function is constructed using the "new"
operator.
The rest of the parameters following the rst parameter in bind() method are
passed as arguments which are prepended to the arguments provided to the
bound function when invoking the target function.

That's all for now. Thank you for reading and I hope this post will be helpful
for beginners who are facing issues regarding the apply() , call() , and
bind() methods of JavaScript.

jQuery Objects Functions JavaScript Es5

Enjoy this post? Give Niladri Sekhar Dutta a like if it's helpful.

 34 18  SHARE
Enjoy this post?  WRITE A POST
 34

https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 5/7
1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

Niladri Sekhar Dutta

Full stack .NET/Classic ASP/Angular2/4 developer
O cial contributor to the Sendgrid c# .NET SDK. Github link :
https://github.com/sendgrid/sendgrid-csharp/ My javascript,jquery and Angular2 answers in
Stackover ow https://stackover ow.com/users/3162724/niladri Microso...

FOLLOW

18 Replies

Leave a reply

farzad jafari a month ago 

“the value for rst parameter is ignored if the bound function is

constructed using the “new” operator.”

can you explain with a sample to I understand above phrase.

thank you for the answer and clear explanation

 Reply

guy inform 2 months ago 

clear explanation ♥

 1 Reply

Demsong tsamo 3 months ago

Enjoy this post?  34
 WRITE A POST

https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 6/7
1/17/2019 How-to: call() , apply() and bind() in JavaScript | Codementor

Really nice article. Thanks.

 2 Reply

Show more replies

Dinesh Pandiyan

Accessing Nested Objects in JavaScript

Tanner Linsley

⚛ 🚀 Introducing React-Static — A progressive static-site framework for React!

Sohaib Nehal

Learn D3.js in 5 minutes

Enjoy this post?  34

https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp 7/7