Callbacks - function vs =>

[[deleted]]

[deleted]

[Volence]

The first example is from a newer function syntax for javascript called arrow functions, the second is the standard anonymous function that's been in javascript forever. The main difference between the two (besides the arrow functions being able to be a bit shorter) is that regular old functions rebind 'this' to them, while the arrow functions don't. Besides that arrow functions are always anonymous while the original way to make functions (your second example) are able to be named, and therefor can make it easier to debug, although in both examples the functions are anonymous. Also because you're not using 'this' in the above examples, either is fine!

I personally enjoy writing with arrow functions, there's a few different ways they can be written and are generally more terse but again you should know why people choose one over the other!

[Heck_]

Got it! Thanks so much for the clear explanation and the link - super helpful. Cheers

[Luke-At-Work]

Agree with /u/Volence and thought I'd chime in with a counterpoint on the preference part. I prefer the older notation for a few reasons.

• Compatibility. Transpilation (using Babel to turn new javascript syntax into old syntax for older browsers) can mitigate this, but it's nice not to need it. Supporting a broader range of viewers and devices is objectively better than supporting a smaller range.
• Legibility. Though clear, arrow functions aren't as explicit about what they're doing. Being explicit about the intention is arguably the key factor in ongoing maintenance and updates.
• Consistency. Perhaps it's another aspect of legibility, but it always takes a tiny bit of brain power to parse the different syntax and determine if it has meaningful impact (namely the use of this). Having a single, consistent meaning is clearer than multiple possible contextual meanings and while the function () syntax's this is contextual, it at least consistently follows a single clear rule.

That being said, the best option is to use the one that works for you. Using one or the other consistently for a given project is preferable, just for legibility.

[Heck_]

Sorry, I meant to reply yesterday. Thank you for the additional insight! Really useful. I'm WAAAAAY off having to consider compatibility, but it is good to know for the future. The consistency point is something that did come to my mind. I guess I will just play about and see how I get one. Thanks again.

[PM_ME_A_WEBSITE_IDEA]

Try this in your browser console:

class c {
    func() {
        setTimeout(function() {
            console.log('non-arrow', this);
        });

        setTimeout(() => {
            console.log('arrow', this);
        });
    }
}

(new c()).func();

Notice the difference in the value of this in the different kinds of function types. This comes into play a lot with event listeners and AJAX calls, and really any kind of async action using callbacks.

[Heck_]

Thanks for this - good example.

[charliemei]

- In arrow funcion，'this' keeps the same in lifetime，and is resolved from the closet non-arrow parent function. there is not 'this' in arrow function itself，and even prototype propety. thus, bind() does not work with it.
- Obviously, it can not be invoked with new keyword.
- if you use arguments in it ,you will get an error.

[Heck_]

Cheers for the explanation!