Passing callback function into event listener. Passed with arrow function vs passing without. Not able to understand why the arrow function equivalent does not work.
Could someone explain why these two snippets of code behave differently. My understanding is that both of them would execute the passed callbackfunction and then execute the code inside that function. Yet when I run the first one it behaves correctly and the second one does not. What is the difference?
getImageBtn.addEventListener("click", getMatchingCatsArray);
getImageBtn.addEventListener("click", getMatchingCatsArray => {
});
In the first it seems you are correctly passing a callback function as a callback function to the event listener where in the second you are passing an anonymous arrow function that takes a single argument, named getMatchingCatsArray in your case.
In other words, the second version is like the following:
getImageBtn.addEventListener("click", (argOrEvent) => { ... });
They are not equivalent. The second version doesn't reference your getMatchingCatsArray callback function.