Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Posted by Jesse Vorvick
Jesse Vorvick
6,047 Points

Arrow function won't work/backtick questions

The teacher's code on step 3 is the following:

$('ul').on('dblclick', 'li', function() {
  $(this).toggleClass('strike');
});

However, when trying to use arrow functions, it doesn't work:

$('ul').on('dblclick', 'li', () => {
  $(this).toggleClass('strike');
});

Playing around with it, I'm pretty sure it's because of the 'this' keyword. For example, if I used e.target instead, it works fine. Can anyone confirm/explain why?

Second question: the teacher used backticks in the second step: $('ul').append(<li>${$newInput}</li>);. Is it now standard to use backticks anywhere there would be quotes in JavaScript? Or just specific locations? Aren't we up to ES 7 or 8 now??

1 Answer

Steven Parker
Steven Parker
231,184 Points
Steven Parker
Steven Parker
231,184 Points

You're exactly right, arrow functions work a bit differently; and one difference is that they don't establish a "this" like conventional functions do. There are some purposes for which they cannot be used as replacements. For more details, see this MDN page on Arrow Functions.

And backticks aren't intended as replacements for quotes. They should be used to create template literals, which would contain substitution tokens for interpolation. MDN also has a page on Template Literals.