You-dont-know-js: Differences between `bind(..)` and fat arrow functions

[IanVS]

I'm struggling to wrap my head around how arrow functions are so much different from bind(..), as explained in Lexical this. Is it not the case that these two examples are identical?

function foo() {
    // return an arrow function
    return (a) => {
        // `this` here is lexically adopted from `foo()`
        console.log( this.a );
    };
}

and

function foo() {
    // return a bound function
    return function (a) {
        console.log( this.a );
    }.bind(this);
}

Does this just mean that it's possible to defeat the this mechanism even when using bind(..)?

The last line of the chapter says:

They are essentially a syntactic replacement of self = this in pre-ES6 coding.

Couldn't it just as easily have said

They are essentially a syntactic replacement of .bind(this) in pre-ES6 coding.

Or is there a nuance that I'm completely missing?

[getify]

This section was written almost two years ago. While I stand by the work, it doesn't necessarily reflect my entire views on the subject, which do evolve over time. My current stance is that bind(..) is the "proper" way to do it, not var self = this. And yes, that arrow functions are basically (not entirely) a replacement of the bind(..) pattern, and only for that, nothing else.

It may be helpful to read this discussion to explain that more fully.

[IanVS]

Thanks for explaining and for the further information, that is helpful. There is a discussion in ESLint about enforcing the use of arrow functions over .bind(this), so I'm curious what you mean when you say:

arrow functions are basically (not entirely) a replacement of the bind(..) pattern

Are they a complete replacement of the .bind(this) pattern, if not bind(..) in general? Or if not, what are the exceptions?

[getify]

No, they are not an exact replacement:

1. Arrow functions are always anonymous, which means you can't, for instance, reliably call them recursively (since you don't have a reliable lexical name to use).
2. Arrow functions actually create lexical bindings for this, super, and arguments. Only this is bound by .bind(..).
3. Arrow functions cannot be used in new expressions, while bind(..) bound functions can.

[IanVS]

Thanks for explaining!

[haniworld]

I'm still trying to figure out why the arrow function is preferred way over .bind(this). Is there any definite advantage to it?

[yelkamel]

With my english level, I can't really explain it clear but if you look this article you will understand. ;)

https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36

Basically, in a PureComponent or ShouldComponent update, the props will be considering as change event if the function don't really change in the parent.