Are there cases in modern JavaScript where arrow functions cannot be used where "bind" was previously used?

Question

I'm still learning the ins and outs of bind and arrow functions.

It seems that wherever we used to use bind we should now use an arrow function instead, though I haven't yet seen it spelled out exactly that way.

So I'm wondering if this is true or if there are some cases where we should still use bind even though an arrow function might work, or some cases where an arrow function will not work and bind is still the only way to do what you want.

Or, if I'm totally off, in new JS code, when should I prefer an arrow function and when should I prefer bind?

Answer 1

I see 2 advantages:

Partial Application:

The bind method can be used to pre-set a function's arguments; it sort of lets you create a sub-function of a function (not literally, behind-the-scenes, there will be only one function) by passing an argument before making the call, so that this argument you have preset will be used for all invocations of the function returned by bind. @Charlie_H has already explained this, but I am going to provide an example as well:

function foo(bar, baz) {
return bar + baz;   
}

var sub_foo = foo.bind(Object.create(null), 20);

console.log(sub_foo(60));
console.log(sub_foo(120));

So as you can see in the above example, the bind method allowed me to create what you could call a sub-function off of foo, this function will always use 20 for its first parameter.

Now again, don't let my poor wording misguide you, bind does not actually create a new function! behind-the-scenes, the original function will be used, the only thing is bind will perform some of its magic so that the parameter you passed to bind is always used. I am using the word "sub-function" because it makes the whole thing easier to understand.

Ability to bind the this of the target function to whatever object you want:

With fat-arrow functions, the this of the fat-arrow function will always be bound to the this of the enclosing scope; with bind, you can bind the target function's this to any object you want:

function foo() {
return this.baz;
}

var bar = foo.bind({baz: "Hell yeah!"});

bar(); // "Hell yeah!"

Moreover, the this binding of fat-arrow functions is not overridable, this is a subtle detail but still useful.

One more thing i want to add, in the book You Don't Know JS: this & Object Prototypes, Kyle Simpson says that you should not use fat-arrow functions to get around this complexities, which sort of bends JavaScript's this rules, since their usage roots back to the var self = this pattern, and that pattern's usage stems from a lack of understanding of JavaScript's this behavior. Short version: he prefers bind. I don't see anything with using fat-arrow functions though, IMO they even make code more readable since just by looking at them you can see what the developer is trying to do and how they've used that, meanwhile, with bind, you don't know exactly what the developer is trying to do and why they're doing it until you look at bind's first argument. I recommend fat-arrow functions where you want the this of the fat-arrow function to be bound to the current scope's this, and bind when you want it bound to something else.

If you don't understand parts of my answer, ask me and I will try to elaborate in the comments.