Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,542 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
218,654 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,542 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
218,654 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.