Understanding ES6 Arrow Functions for jQuery Developers

Arrow functions are a really handy new part of the ES6 JavaScript spec.

Along with shorter, more concise syntax one of the benefits is that is handles the keyword this a little differently. More specifically, it doesn't change the binding of this when you enter into a new function that was declared with an arrow.

So, while you'll use this in any of your JavaScript, here is a problem we have all run into with jQuery events, and how you can fix it with ES6 arrow functions.

// Go from this code: $ ( ' .cta ' ). on ( ' click ' , function () { var that = this ; setTimeout ( function () { $ (that). toggleClass ( ' on ' ); }, 1000 ) }); // To this code: $ ( ' .cta ' ). on ( ' click ' , function () { setTimeout ( () => { $ ( this ). toggleClass ( ' on ' ); }, 1000 ) });

https://www.youtube.com/watch?v=6aETKj5-SKg