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 JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,544 Points

The "() =>" part of EventListener was never explained.

Whenever Guil uses this EventListener technique I simply don't understand what's happening. Unlike for loops where you have to use: "var > list.length, += 1" etc. I get what's going on there because it was explained but I don't know what's happening and why we use this markup: "() =>"

I just get confused every time I see it.

1 Answer

Steven Parker
Steven Parker
231,271 Points

That's the "arrow function" syntax. It's covered in both of the ES2015 courses and also has it's own workshop Introducing Arrow Function Syntax.

But you can also use the classic "function ()" syntax instead.

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,544 Points

Thank you, Steven. I didn't go through that route. I only got here because Javascript and the DOM was a requirement for the next course in my FEWD program.

To be clear, this: button.addEventListener('click', function() { p.innerHTML = input.value + ':'; });

Is the same as: button.addEventListener('click', () => { p.innerHTML = input.value + ':'; });

Interesting to define an empty function within addEventListener. I understand it a little better after some google-fu.

How common is a function that's written this way? var.addRandomFunction('trigger', function() { code = 'do this stuff'; });

The last part of this is also confusing: "});".

But I understand it enough now to not be completely confused whenever I see it, thanks. I'm sure I will go over this again during the rest of the Javascript training in FEWD and if not I will take note to review this again.

Steven Parker
Steven Parker
231,271 Points

In that "`});" at the end, the "}" is the closing brace of the anonymous (unnamed) function, the ")" is the closing parenthesis of the "addRandomFunction" call, and ";" is the normal end of any JavaScript statement.