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 Asynchronous Programming with JavaScript Asynchronous JavaScript with Callbacks Async Programming and Callback Functions

Posted by geo
geo
4,193 Points

Why not simply pass getJSON() as a callback to the event listener?

At around 3:30 in the video:

// Instead of passing an anonymous arrow function as a callback to the event listener
// which then calls getJSON() inside its body:
btn.addEventListener('click', () => getJSON(astrUrl));

// Why don't we just directly pass getJSON() itself as a callback like this:
btn.addEventListener('click', getJSON(astrUrl));

Is it because in a different use case (other than the one shown here) we would need to have access to the event object that is somehow implicitly present (?) as an argument in the anonymous arrow function?

btn.addEventListener('click', (event) => {
  // do sth. with the event argument
  getJSON(astroUrl)
});

3 Answers

Daniel Phillips
Daniel Phillips
26,940 Points
Daniel Phillips
Daniel Phillips
26,940 Points

What you're proposing would try to call getJSON(astrosUrl) and use what's returned (null) as the callback function for the click event listener. You need to use a callback function as the second argument to addEventListener so that getJSON has the url you want it to use when the event (click) happens and not before. Event listeners aren't set up to accept an argument to pass to the callback function.

Moritz Wallawitsch
Moritz Wallawitsch
736 Points

Hi Daniel, sorry but I don't understand that explanation. Why does it return null and why do I have to use a callback function as a second argument. I thought initializing or passing in the function would work too. Could you explain it for dummies? Perhaps with an example?

edit: found this. Seems like it is just how js works... https://social.msdn.microsoft.com/Forums/en-US/74f75572-0910-42b1-987b-ba4262c0fd77/pass-parameters-to-function-called-with-addeventlistener?forum=winappswithhtml5

jennyhan
jennyhan
36,121 Points
jennyhan
jennyhan
36,121 Points

It's because you are not passing the function as an argument to addEventListener. Instead, you are returning a callback function from addEventListener.

geo
geo
4,193 Points

Hi Jenny and thanks for taking the time to read my question.

I am not sure if I understand correctly what you are saying here.

Unless I am missing something, I cannot see where I am "returning a callback function from addEventlistener" as you are saying above. Can you please try to rephrase?

Thanks in advance.

Farid Lavizadeh
Farid Lavizadeh
12,006 Points
Farid Lavizadeh
Farid Lavizadeh
12,006 Points

Unless a named function is tied to an event, it will just run without the event occurring. Since getJSON(astrosUrl) is not tied to any event, it will run before a user clicks anything. To tie the named function to an event, a preceding anonymous function is used.