2024-03-06T22:00:00Z
Hey everyone 
I’m going through theJavaScript course, and I’m wondering why in most examples, when inserting a callback function as a parameter, fCC passes an arrow function which does nothing but call another function instead of simply passing that inner function.
For example, why would you use this
exampleButton.addEventListener("click", () => {exampleFunction()});
instead of this?
exampleButton.addEventListener("click", exampleFunction);
Thanks!
hi there, welcome to the fCC forum.
Just to give context to your question, can you post a link to the step that shows this code?
Hey hbar1st, thanks for the quick reply.
The code above isn’t from a particular step. It’s just a recreation of a pattern I noticed over time and started wondering about.
I’m suspecting that the reason the code is written this way is to allow a parameter to be passed into the inner function (which I called “exampleFunction” in my example), since you can write
exampleButton.addEventListener("click", () => {
exampleFunction(exampleParameter);
});
but you can’t write
exampleButton.addEventListener("click", exampleFunction(exampleParameter));
since, in that second case, you’re no longer passing a reference to a function, but rather a function call.
Is that the reason, or is there something else?
Thanks!
I prefer to talk about specific code in a project rather than in general as your post is about something you saw? (that’s why I’m asking for a link)
Once we are looking at the same code in the project, then it becomes easier to discuss whether this was done on purpose or by mistake.
Thanks for your understanding.
One example is in steps 6-8 of the lesson “Learn localStorage by Building a Todo App” in the JS course, which are solved as such:
openTaskFormBtn.addEventListener("click", () =>
taskForm.classList.toggle("hidden")
);
closeTaskFormBtn.addEventListener("click", () => {
confirmCloseDialog.showModal();
});
cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
thanks for sharing that. So you’re question is then, why didn’t they give these arrow functions names and call them? Can you re-state the question?
I’m wondering why we’re passing, as a parameter, an anonymous arrow function which does nothing but call another function, instead of simply passing that other function as a parameter.
For example, why do this:
closeTaskFormBtn.addEventListener("click", () => {
confirmCloseDialog.showModal();
});
instead of doing this:
closeTaskFormBtn.addEventListener("click", confirmCloseDialog.showModal);
ah okay. So I think you’ve probably guessed the reason why already.
The addEventListener function requires that the second parameter be a callback function.
A callback function is like the ‘definition of a function’. The function is stored in memory and called only when the event happens.
This is unlike the code inside the anonymous function block which is not a callback function but an actual function call.
(but like I said, I think you figured that out already)
Edit: as Jeremy said below, if you pass in a function, but not a function call then it should also work (the function call is the one that has the () parenthesis at the end).
As for why fcc does it like that, it is probably because they are teaching JS to beginners and learning to write arrow functions and provide them as callbacks is an important skill.
This should work. A callback does not have to be an arrow function.
This is unlike the code inside the anonymous function block which is not a callback function but an actual function call.
So you’re saying that we use anonymous arrow functions in order to be able to contain function calls inside them?
As far as I understand, the only relevant difference between a passing an anonymous function definition which itself calls a function, like this:
exampleButton.addEventListener("click", () => {exampleFunction()});
and between simply passing a reference to that inner function, like this:
exampleButton.addEventListener("click", exampleFunction);
is that doing the former would allow us to pass parameters to the inner function (which I’ve called “exampleFunction” in my example.
Is that the point, or am I missing the mark?
So is the use of arrow function definition just to allow for the use of parameters?
Yeah, this arrow function is doing something other than just passing transparently through to a different function
Any function allows the use of parameters? I’m not sure I understand what you mean.
I think it is because the arrow function is meant to contain more code than one line. It’s just that these examples are artificial because they’re from a teaching JS curriculum.
I don’t think that’s what’s happening here. You can just use the name of a function as the argument for setting the callback. I’ve done it before.
yeah, i think the confusion is:
why are callbacks in the js course using arrow functions as callbacks if they can just tell the camper to write the single function that is being used inside their code blocks.
I mean that if I were to pass the function reference directly, like this:
openTaskFormBtn.addEventListener("click", taskForm.classList.toggle);
instead of using an anonymous function definition, like this:
openTaskFormBtn.addEventListener("click", () =>
taskForm.classList.toggle("hidden")
);
it wouldn’t work, because I couldn’t put in the parameter “hidden”, since
taskForm.classList.toggle("hidden")
is a function call, as opposed to a function reference, and you can’t pass a function call as a parameter to addEventListener (or to anything else for that matter).
Yes, that’s exactly the question.
Anyways, it’s all cleared up for me now. Thank you hbar1st and JeremyLT for your help! 
I mean, it’s a good question. My guess is still: it’s because they’re teaching JS and they want people to get used to using arrow functions. But I’m waiting to see what Jeremy thinks still.
Correct