Quelle est la différence entre les fonctions fléchées et les fonctions normales en JavaScript?

1. Syntaxe :
   • Fonction normale : function myFunction() { ... }
   • Fonction flèche : () => { ... } ou param => { ... }
2. Contexte this :
   • Fonction normale : this est déterminé par le contexte d'appel.
   • Fonction flèche : this est hérité lexicalement de la portée environnante (n'a pas son propre this).
3. Constructeurs :
   • Fonction normale : Peut être utilisée comme constructeur (new myFunction()).
   • Fonction flèche : Ne peut pas être utilisée comme constructeur.
4. Objet arguments :
   • Fonction normale : Possède son propre objet arguments contenant les arguments passés.
   • Fonction flèche : Ne possède pas son propre objet arguments, l'accès aux arguments se fait via des paramètres rest (...args).
5. Fonctions nommées :
   • Fonction normale : Peut être nommée (function myFunction() { ... }).
   • Fonction flèche : Par défaut anonyme, assignée à une variable pour la nommer (const myFunction = () => { ... }).
6. Retour implicite :
   • Fonction normale : Nécessite explicitement return pour retourner une valeur (sauf dans les cas simples comme IIFE).
   • Fonction flèche : Dans un corps en une seule ligne, peut retourner implicitement le résultat d'une expression sans return.

Tableau comparatif :

Caractéristique	Fonction normale	Fonction flèche
Syntaxe	function name() { ... }	() => { ... }
Contexte this	Dynamique (selon l'appel)	Lexical (de la portée parent)
Constructeur	Oui	Non
Objet arguments	Oui	Non (utilise paramètres rest)
Nomination	Peut être nommée	Anonyme (assignée)
Retour implicite	Non (nécessite généralement return)	Oui (pour corps en une ligne)

// Exemple de fonctions normales
function standardFunction() {
  console.log(this); // Dépend du contexte d'appel
  console.log(arguments); // Objet arguments accessible
}

const obj = {
  method: standardFunction
};

standardFunction(); // `this` sera window (dans le navigateur) ou undefined (en mode strict)
obj.method(); // `this` sera obj
new standardFunction(); // `this` sera la nouvelle instance

// Exemple de fonctions fléchées
const arrowFunction = () => {
  console.log(this); // Hérite `this` du contexte environnant (par exemple, Global ou module)
  // console.log(arguments); // Erreur, `arguments` non disponible
};

const outerObj = {
  outerMethod: function() {
    const innerArrowFunction = () => {
      console.log(this); // Hérite `this` de outerMethod (qui est outerObj)
    };
    innerArrowFunction();
  }
};

arrowFunction(); // `this` sera window (dans le navigateur) ou {} (en Node.js)
outerObj.outerMethod(); // `this` dans innerArrowFunction sera outerObj

// Retour implicite dans fonction flèche
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

// Fonction normale avec retour explicite
function multiply(a, b) {
  return a * b;
}
console.log(multiply(2, 3)); // 6

// La fonction flèche ne peut pas être un constructeur
// new arrowFunction(); // Erreur : TypeError: arrowFunction_1 n'est pas un constructeur