Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the function immediately, and modify the context.
Call/apply call the function immediately, whereas bind returns a function that, when later executed, will have the correct context set for calling the original function. This way you can maintain context in async callbacks and events.
I do this a lot:
function MyObject(element) {
this.elm = element;
element.addEventListener('click', this.onClick.bind(this), false);
};
MyObject.prototype.onClick = function(e) {
var t=this; //do something with [t]...
//without bind the context of this function wouldn't be a MyObject
//instance as you would normally expect.
};
I use it extensively in Node.js for async callbacks that I want to pass a member method for, but still want the context to be the instance that started the async action.
A simple, naive implementation of bind would be like:
Function.prototype.bind = function(ctx) {
var fn = this;
return function() {
fn.apply(ctx, arguments);
};
};
There is more to it (like passing other args), but you can read more about it and see the real implementation on the MDN.
Answer from Chad on Stack Overflow Top answer 1 of 16
921
Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the function immediately, and modify the context.
Call/apply call the function immediately, whereas bind returns a function that, when later executed, will have the correct context set for calling the original function. This way you can maintain context in async callbacks and events.
I do this a lot:
function MyObject(element) {
this.elm = element;
element.addEventListener('click', this.onClick.bind(this), false);
};
MyObject.prototype.onClick = function(e) {
var t=this; //do something with [t]...
//without bind the context of this function wouldn't be a MyObject
//instance as you would normally expect.
};
I use it extensively in Node.js for async callbacks that I want to pass a member method for, but still want the context to be the instance that started the async action.
A simple, naive implementation of bind would be like:
Function.prototype.bind = function(ctx) {
var fn = this;
return function() {
fn.apply(ctx, arguments);
};
};
There is more to it (like passing other args), but you can read more about it and see the real implementation on the MDN.
2 of 16
531
They all attach this into function (or object) and the difference is in the function invocation (see below).
call attaches this into function and executes the function immediately:
var person = {
name: "James Smith",
hello: function(thing) {
console.log(this.name + " says hello " + thing);
}
}
person.hello("world"); // output: "James Smith says hello world"
person.hello.call({ name: "Jim Smith" }, "world"); // output: "Jim Smith says hello world"
bind attaches this into function and it needs to be invoked separately like this:
var person = {
name: "James Smith",
hello: function(thing) {
console.log(this.name + " says hello " + thing);
}
}
person.hello("world"); // output: "James Smith says hello world"
var helloFunc = person.hello.bind({ name: "Jim Smith" });
helloFunc("world"); // output: Jim Smith says hello world"
or like this:
...
var helloFunc = person.hello.bind({ name: "Jim Smith" }, "world");
helloFunc(); // output: Jim Smith says hello world"
apply is similar to call except that it takes an array-like object instead of listing the arguments out one at a time:
function personContainer() {
var person = {
name: "James Smith",
hello: function() {
console.log(this.name + " says hello " + arguments[1]);
}
}
person.hello.apply(person, arguments);
}
personContainer("world", "mars"); // output: "James Smith says hello mars", note: arguments[0] = "world" , arguments[1] = "mars"
DEV Community
dev.to › codecraftjs › understanding-call-apply-and-bind-essential-methods-in-javascript-d62
Understanding Call, Apply, and Bind: Essential Methods in JavaScript - DEV Community
May 23, 2023 - The call() and apply() methods are used to immediately invoke a function with a specified this value and arguments, while the bind() method returns a new function with a specified this value that can be called later.
What are some use cases for call, apply, and/or bind?
The basic idea behind call/apply/bind is the same: explicitly set function parameters including this. The context changes a bit, but the use cases will all be niche instances when the normal ways of setting function parameters (i.e. placing them between the parentheses or to the left of the dot for this) are not sufficient. Apply First, apply. You will almost certainly never need apply. Why? Because the common use case has been supplanted by a new syntax: the spread operator (...). In the past, if you had your parameters in an array, apply was the way to get them into a function. const nums = [1, 2, 3]; const largest = Math.max.apply(null, nums); console.log(largest); // 3 These days, spread is easier to write and read. const nums = [1, 2, 3]; const largest = Math.max(...nums); console.log(largest); // 3 Call Okay, call works a lot like just, well, calling a function. The only difference is that the this moves from the left of the dot to the first parameter between the parentheses. const nums = [1, 2, 3]; console.log(nums.includes(2)); // true console.log(Array.prototype.includes.call(nums, 2)); // true When is this useful? Mostly never. Cases occasionally come up. Sometimes you want to call one object's method on a different object. Call lets you do that. It is always very technical and niche. Bind Bind is probably the most useful of the three, which isn't saying much. It allows you to pass parameters to a function before you call it, creating a new function with those parameters baked in. const nums = [1, 2, 3]; const numsIncludesThree = Array.prototype.includes.bind(nums, 3); console.log(numsIncludesThree()); // true nums.pop(); console.log(numsIncludesThree()); // false This is kind of neat. It allows you to build up functions out of parameters, and is related to awesome concepts like "partially applying" functions, "factory" functions, and "currying". That said, you don't actually see bind used all that often. It is clunky compared to other options like lodash's partial , and most people who write code like this also religiously avoid using this, which will always be the first parameter bind takes. For awhile it was common to see people use bind in their class definitions: class User { constructor(name) { this.name = name; this.greet = this.greet.bind(this); } greet() { console.log(`Hello, ${this.name}!`); } } This allows you to use your class method in circumstances where the this would not be set, for example as a callback to another function like an event listener or setTimeout. const user = new User('Sue'); setTimeout(user.greet, 1000); // Hello, Sue! This approach has mostly fallen out of fashion though. Using bind in the constructor is just fighting the way JS works because you wish it worked like a different language, people don't even use classes all that often anymore, and there are more straightforward ways to accomplish the same behavior. setTimeout(() => { user.greet(); }, 1000); // Hello, Sue! (no bind required) TLDR If you need them, you'll know. But you mostly won't. More on reddit.com
14
11
September 18, 2022call, apply, bind and function borrowing in JavaScript
Questions and posts about frontend development in general are welcome, as are all posts pertaining to JavaScript on the backend. ... call, apply and bind are 3 important methods in JavaScript and each of them are slightly different from one another and have different use cases. More on reddit.com
5
2
June 29, 2022.call vs .bind vs .apply...ELI5?
call calls a function with individual arguments:
fn.call( thisArg, 1, 2, 3 ); // fn( 1, 2, 3 ); with `this` in fn set to `thisArg`
apply calls a function with an array of arguments:
fn.apply( thisArg, [ 1, 2, 3 ] ); // fn( 1, 2, 3 ); with `this` in fn set to `thisArg`
bind doesn't call the function at all, but binds scope and arguments to a function so that when you call the resulting function the original one is called:
var newFn = fn.bind( thisArg, 1, 2, 3 ); // fn doesn't run yet newFn(); // calls fn.call( thisArg, 1, 2, 3 ); newFn( 4 ); // calls fn.call( thisArg, 1, 2, 3, 4 );
So call vs apply just comes down to how you have your data (well that and call is much faster). Use bind when you want to do something later
3
14
May 28, 2015Do y'all ever use call/apply/bind?
I don't think I've used them since arrow functions became commonplace. Maybe I used them like once in some library that wasn't well written. That's about it. More on reddit.com
24
30
August 23, 2023Videos
11:22
call apply bind javascript | javascript bind explained | javascript ...
12:02
#42 Using Call, Apply and Bind | JavaScript Full Tutorial - YouTube
06:56
JavaScript Bind Call Apply Explained - YouTube
- YouTube
10:50
call, apply and bind method in JavaScript - YouTube
Call vs Apply vs Bind Functions in Javascript
Educative
educative.io › answers › what-is-the-difference-between-call-apply-bind
What is the difference between call() apply() & bind() ?
The call and apply methods set this to a function and call the function. The bind method will only set this to a function.
Medium
medium.com › @jhawleypeters › javascript-call-vs-apply-vs-bind-61447bc5e989
Javascript Function Methods: Call vs Apply vs Bind | by Jonathan Hawley-Peters | Medium
November 22, 2019 - One second later, speak() is called in the context of cat. If we held onto the bound function for longer and kept invoking it, it would always be invoked in the context of cat, even if we stored it as a method on some other object. Bind can do a lot more, and the MDN page on Function.prototype.bind() is a great place to start.
freeCodeCamp
freecodecamp.org › news › understand-call-apply-and-bind-in-javascript-with-examples
How to Use the Call, Apply, and Bind Functions in JavaScript – with Code Examples
April 3, 2025 - The only difference is that in apply you can pass an array as an argument list. Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.
Medium
medium.com › @rabailzaheer › exploring-call-apply-and-bind-methods-in-javascript-6023627c7bdc
Exploring Call, Apply, and Bind Methods in JavaScript
September 26, 2023 - In JavaScript, the this keyword refers to the current execution context, often associated with the object that called the function. The behavior of this can be complex and context-dependent. call, apply, and bind provide control over this context:
Reddit
reddit.com › r/learnjavascript › what are some use cases for call, apply, and/or bind?
r/learnjavascript on Reddit: What are some use cases for call, apply, and/or bind?
September 18, 2022 -
What are some practical use cases where call, apply, and/or bind would be useful?
Top answer 1 of 6
16
The basic idea behind call/apply/bind is the same: explicitly set function parameters including this. The context changes a bit, but the use cases will all be niche instances when the normal ways of setting function parameters (i.e. placing them between the parentheses or to the left of the dot for this) are not sufficient. Apply First, apply. You will almost certainly never need apply. Why? Because the common use case has been supplanted by a new syntax: the spread operator (...). In the past, if you had your parameters in an array, apply was the way to get them into a function. const nums = [1, 2, 3]; const largest = Math.max.apply(null, nums); console.log(largest); // 3 These days, spread is easier to write and read. const nums = [1, 2, 3]; const largest = Math.max(...nums); console.log(largest); // 3 Call Okay, call works a lot like just, well, calling a function. The only difference is that the this moves from the left of the dot to the first parameter between the parentheses. const nums = [1, 2, 3]; console.log(nums.includes(2)); // true console.log(Array.prototype.includes.call(nums, 2)); // true When is this useful? Mostly never. Cases occasionally come up. Sometimes you want to call one object's method on a different object. Call lets you do that. It is always very technical and niche. Bind Bind is probably the most useful of the three, which isn't saying much. It allows you to pass parameters to a function before you call it, creating a new function with those parameters baked in. const nums = [1, 2, 3]; const numsIncludesThree = Array.prototype.includes.bind(nums, 3); console.log(numsIncludesThree()); // true nums.pop(); console.log(numsIncludesThree()); // false This is kind of neat. It allows you to build up functions out of parameters, and is related to awesome concepts like "partially applying" functions, "factory" functions, and "currying". That said, you don't actually see bind used all that often. It is clunky compared to other options like lodash's partial , and most people who write code like this also religiously avoid using this, which will always be the first parameter bind takes. For awhile it was common to see people use bind in their class definitions: class User { constructor(name) { this.name = name; this.greet = this.greet.bind(this); } greet() { console.log(`Hello, ${this.name}!`); } } This allows you to use your class method in circumstances where the this would not be set, for example as a callback to another function like an event listener or setTimeout. const user = new User('Sue'); setTimeout(user.greet, 1000); // Hello, Sue! This approach has mostly fallen out of fashion though. Using bind in the constructor is just fighting the way JS works because you wish it worked like a different language, people don't even use classes all that often anymore, and there are more straightforward ways to accomplish the same behavior. setTimeout(() => { user.greet(); }, 1000); // Hello, Sue! (no bind required) TLDR If you need them, you'll know. But you mostly won't.
2 of 6
2
If I am expecting to have an object receive async calls, I tend to bind its methods. This makes it possible to say things like someWidget.addEventListner('change', myObject.handleChange); instead of someWidget.addEventListner( 'change' , event => myObject.handleChange(event) ); This code establishes a trampoline for starting a line of work that can be cancelled before it finishes, on the grounds that the input data on which the work is based are no longer valid. A trampoline, according to the protocols that I use, is an object that supports a defer(func, ...args) operation. This says that assuming that the work is continuing, func will be called with (...args) eventually and on a short stack. The simplest such defer would look like this: const defer = (func, ...args) => setTimeout(func, 0, ...args); This would meet the requirement that the function will be called eventually on the args and on a short stack, but it would not support a thread that could be canceled before it finishes and would not support a priority scheme, both of which I have implemented with my own trampoline code. Each of these, when I put them into effect, relies on setTimeout at the very bottom, however. Anyway, the implementation of the tramp for cancellability binds all the methods to the instance, in the .new method. This way, I never have to worry about using a method call like () => obj.method(...args) to cite them. I just name them, like obj.method and that suffices as a function to be called back, which is something that happens a lot when you are doing async stuff without relying on Promise.
GeeksforGeeks
geeksforgeeks.org › javascript › explain-call-apply-and-bind-methods-in-javascript
Explain call(), apply(), and bind() methods in JavaScript - GeeksforGeeks
This works like the native call() method. The only difference from the bind polyfill is that MyCall does not return a new function - just like JavaScript’s built-in call().
Published January 22, 2026
W3docs
w3docs.com › javascript
JavaScript: bind() vs apply() and call()
Among these three methods above, bind() works a little bit differently. Unlike call() and apply() that execute the current function immediately, bind() returns a new function.
DEV Community
dev.to › hebashakeel › difference-between-call-apply-and-bind-4p98
Difference between call,apply and bind - DEV Community
May 7, 2022 - Call and apply are pretty interchangeable. Both execute the current function immediately. You need to decide whether it’s easier to send in an array or a comma separated list of arguments. Whereas Bind creates a new function that will have this set to the first parameter passed to bind().
LinkedIn
linkedin.com › pulse › what-difference-between-call-apply-bind-muhammad-rizwan
What is the difference between call, apply and bind?
December 9, 2022 - As you can see, the call and apply methods are used to call a function and specify the “this” value and arguments to be passed to the function. The bind method is used to create a new function with a different “this” value.
CodeSweetly
codesweetly.com › call-apply-bind-javascript
call() vs apply() vs bind() in JavaScript | CodeSweetly
Instead, it only binds (assigns) the method to the new object. In contrast, call() automatically invokes the method on which you used it.
Medium
medium.com › @leonardobrunolima › javascript-tips-apply-vs-call-vs-bind-d738a9e8b4e1
Javascript tips — Apply vs. Call vs. Bind | by Leonardo Bruno Lima | Medium
January 13, 2019 - Hi! Today I’ll talk about the differences between apply vs. call vs. bind. These JavaScript methods allow you to change the value of ‘this’ for a given function.
SheCodes
shecodes.io › athena › 65300-what-is-the-difference-between-bind-call-and-apply-in-javascript
[JavaScript] - What is the difference between bind, call, and apply in JavaScript?
Learn how to use bind, call, and apply in JavaScript to set the value of this in a function and call the function with a given this value.
freeCodeCamp
freecodecamp.org › news › the-difference-between-javascripts-call-apply-and-bind-methods-4e69917f77bd
The difference between JavaScript’s call, apply, and bind methods
December 11, 2018 - Ways to remember: “Call’s arguments are separated by commas” or “CC”. **bind(this)**: Returns a new function whose this value is bound to the provided value.
C# Corner
c-sharpcorner.com › interview-question › difference-between-call-apply-and-bind-function-in-javascript-explain-with-example
Difference between call Apply and Bind function in javascript? explain with example
Call is for comma (separated list) and Apply is for Array. Bind is a bit different. It returns a new function.
Medium
medium.com › @omergoldberg › javascript-call-apply-and-bind-e5c27301f7bb
Javascript: call(), apply() and bind() | by Omer Goldberg | Medium
July 3, 2018 - What that means, is that we can call any function, and explicitly specify what this should reference within the calling function. Really similar to the bind() method!
OpenReplay
blog.openreplay.com › choosing-call-apply-bind-javascript-guide
Choosing Between call(), apply(), and bind() in JavaScript: A Developer's Guide
bind() creates a new function with a fixed context for later execution · Arrow functions and spread syntax offer modern alternatives in many scenarios · Choose the right method based on execution timing, argument format, and context persistence needs · Before diving into the solutions, let’s clarify the problem these methods solve. In JavaScript, the value of this inside a function depends on how the function is called, not where it’s defined.
Bitstack
blog.bitsrc.io › understanding-call-bind-and-apply-methods-in-javascript-33dbf3217be
Understanding Call, Bind and Apply Methods in JavaScript | by Sukhjinder Arora | Bits and Pieces
March 5, 2025 - We use call, bind and apply methods to set the this keyword independent of how the function is called. This is especially useful for the callbacks (as in the above example). We know that functions are a special kind of objects in JavaScript. So they have access to some methods and properties.