React Part 1 - Animal Fun Facts

Get Help React.js
#1

Can anyone help explain to me why the below function works but the one commented out doesn’t work? Is there a syntax error I’m missing?

// const displayFact = (e) => {
//   const selectedAnimal = e.target.alt;
//   const animalInfo = animals[selectedAnimal]
//   const optionIndex = Math.floor(Math.random()*animalInfo.facts.length);
//   const fact = animalInfo.facts[optionIndex];
//   document.getElementById('fact').innerHTML = fact;
// }

function displayFact(e){
  const selectedAnimal = e.target.alt;
  const animalInfo = animals[selectedAnimal]
  const optionIndex = Math.floor(Math.random()*animalInfo.facts.length);
  const fact = animalInfo.facts[optionIndex];
  document.getElementById('fact').innerHTML = fact;
}
#2

I suppose that you call the function before its definition. That works for the function declaration due to hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting doesn’t apply for function expressions defined with const keyword.

#3

Thank you.

I actually thought they were interchangeable and the arrow function was just a refactoring exercise of the normal function declaration.

Turns out I’m wrong looking at the top section of here: