How to solve the issue of using jQuery(this) under ES6 arrow functions (expressions)
Sometimes migrating the Javascript ES5 code to Javascript ES6 is a bit challenging. By example one particular challenge is dealing with
jQuery $(this) in the newer ES6 context inside an arrow (expression) function. The ES6 adoption process is slower than expected but ... on the way. ES6 code runs faster, have better variable isolation. Example: let myVar have a local scope instead of var myVar which have a global scope. More, the const myVar = 123 makes it immutable. ES6 supports the class syntax and much much more. Thus, at some point most of Javascript / jQuery developers will have to deal with the problem presented in this article.Intro: Arrow functions vs traditional functions in ES6 Javascript
Arrow expression (functions / methods) are a relatively new Javascript syntax type to offer a compact alternative to the traditional Javascript functions. Using the new ES6 arrow syntax in some contexts have some limitations with older Javascript code, some time can't be used in all situations, but generally offer a more clear code exactly because they are no more interpreting the this ambiguous expression. However there are several benefits of using the arrow syntax for functions in ES6 Javascript:
- they are a shorter syntax - requires less code
- the code and syntax is more clear and concise (no more ambiguous) without using the this keyword which can cause a lot of issues if moving a portion of code from one context to another
The example below reflect the syntax differences between ES5 and ES6 arrow methods
Examples: ES6 syntax vs. traditional / ES5 syntax in Javascript
// sample javascript code
// (c) 2022 w3soft.org
// license: BSD
// traditional javascript function (ES5)
const myFunctionTraditional = function(x, y) {
return (x + y); // returns the sum of (x + y)
}
// arrow javascript function (ES6)
const myFunctionES6Std = (param1, param2) => {
return (x + y); // returns the sum of (x + y)
}
// arrow javascript function (ES6) - short version
const myFunctionES6Short = (param1, param2) => (x + y); // returns the sum of (x + y)
Problem: Using the jQuery(this) inside ES6 arrow functions is not working and throws error
When using the
jQuery(this) or $(this) it gets converted to this which is interpreted not in the ES6 context but in the ES5 context as this = self.Thus it will throw an Error if used inside an ES6 arrow syntax because the arrow expressions don't have their own this binding, they inherit one from the outer closure. There's nothing jQuery can do to change that behaviour. But the code can be easy adapted.
Solutions: use jQuery(event.currentTarget) or jQuery(element) instead of jQuery(this), depending on the jQuery context
Below there are two working solutions to solve the problem for two different contexts of jQuery:
$(this) in the single target context and $(this) in the multiple targets context. Of course there can be a lot of other different jQuery contexts but all can be solved by similarity with the two samples provided in this article.Solution one: adapting jQuery $(this) for a single target inside an arrow function (sample code)
In the code below, notice the replacement of
$(this) with $(event.currentTarget) in the ES6 arrow method as jquery on click context:// sample javascript code
// (c) 2022 w3soft.org
// license: BSD
// Standard version (ES5), traditional function
$('#button').on('click', function(event){
$(this).addClass('active');
});
// ES6 version, arrow expression: have to use: $(event.currentTarget) instead of $(this)
$('#button').on('click', (event) => {
$(event.currentTarget).addClass('active');
});
Solution two: adapting jQuery $(this) for multiple Targets inside arrow functions (sample code)
In the code below, notice the replacement of
$(this) with $(element) in the ES6 arrow method as jquery each context:// sample javascript code
// (c) 2022 w3soft.org
// license: BSD
// Standard version (ES5), traditional function
$('.button').each(function(index, element){
$(this).addClass('active');
});
// ES6 version, arrow expression: have to use: $(element) instead of $(this)
$('.button').each((index, element) => {
$(element).addClass('active');
});
Conclusions
- Writing context clear code is a must since Javascript ES6
- the jQuery
$(this)orjQuery(this)usage in development over and over again should be adapted by the jQuery target in the context to make the code working - there are several pitfalls which are a bit more complicate to be solved without the
$(this)but they will be treated in a different article
FAQs - Frequently Asked Questions about using jQuery with ES6 javascript syntax
- Question:
Can I use jQuery with arrow functions ? Yes, but the jQuery(this) / $(this) have to be replaced with the real object target (reasons are explained above, in the article).There are several things that will not work, not only for the jQuery code but also for the rest of your javascript code. By example usingthiskeyword which is not supported within ES6 arrow context. The explanation is above, in this article. - Question:
Can I use this keyword within an ES6 arrow expression ? No, you can not use this keyword in theES6
context, it is not supported.Thethiskeyword does not work as expected within the newer javascript ES6 arrow function context. Arrow expression functions don't have their own bindings tothis,argumentsorsuper, and should not be used as methods.
