Animal Fun Facts: Normal Function vs. Arrow Function

[pickledjackalope]

I recently finished the Animal Fun Facts project. I got stuck for a long time because displayFacts would not work when assigned, and I eventually found that it was because of my function definition. I had initially defined it as an arrow function as follows:

const displayFacts = e => {...};

Eventually I corrected it to:

function displayFacts(e) = {...}

This seemed to fix it, which leads me to my question.

Why did this not work with an arrow function?

My first guess is that e.target.alt fails in the same way that the “this” keyword works differently in arrow functions, but I’m really not sure, and googling didn’t help very much.

[mtrtmk]

See this post:

Animal Fun Facts Project | onClick not working with arrow function

Hello, and welcome to the forums! Was the function before or after you create the array of images? This matters because of hoisting. If your code was: create the images array here -- use the displayFact function for onClick on each image define the displayFact function here then displayFact wasn’t available to it if you used const or let. However, when you used function, then it will be hoisted and it was available when you were creating the images array even if the function was defined …

[pickledjackalope]

Yes! This is exactly correct. I just tried shifting the order to have the definition with an arrow function before the call during the for loop, and the error went away. Thanks for the quick reply!