Comprendre les fonctions fléchées dans ES6

Les fonctions fléchées, introduites dans ECMAScript 6 (ES6, une spécification de JavaScript), offrent une syntaxe plus concise pour écrire des fonctions. Cela rend le code plus lisible et plus facile à maintenir. Cependant, elles ont aussi quelques différences importantes par rapport aux fonctions traditionnelles. Comprendre ces différences est essentiel pour utiliser correctement les fonctions fléchées.

Le contexte 'this' des fonctions fléchées

L'une des déclarations vraies sur les fonctions fléchées est qu'elles n'ont pas leur propre contexte 'this'.

Dans une fonction traditionnelle, 'this' est défini par la façon dont la fonction est appelée. Cependant, dans une fonction fléchée, 'this' est déterminé par le contexte englobant, c'est-à-dire l'endroit où la fonction fléchée est définie. Si vous essayez d'utiliser 'this' à l'intérieur d'une fonction fléchée, vous vous référerez à la valeur de 'this' dans le contexte englobant.

Voici un exemple pratique :

let exempleObjet = {
  value: 'Valeur de la propriété',
  fonctionFleche: function() {
    let fonctionInterne = () => {
      console.log(this.value); // 'Valeur de la propriété'
    }
    fonctionInterne();
  }
}

exempleObjet.fonctionFleche(); 

Dans cet exemple, la fonction interne est une fonction fléchée et utilise 'this'. Par conséquent, elle hérite de 'this' de la fonction englobante (la méthode fonctionFleche de exempleObjet), donc this.value renvoie la valeur de la propriété value.

L'hisser des fonctions fléchées

Une autre particularité des fonctions fléchées est qu'elles ne sont pas hissées. Le "hissage" est un comportement de JavaScript où les déclarations de variables et de fonctions sont déplacées vers le haut de leur scope actuel lors de la phase d'interprétation.

Cependant, les fonctions fléchées, tout comme les expressions de fonctions traditionnelles, ne se comportent pas de cette manière. Elles ne sont pas hissées au sommet du scope et elles doivent être définies avant d'être utilisées. Voici un exemple :

hissage();

function hissage() {
  console.log('Tout va bien, je suis une déclaration de fonction.');
}

nonHissage();

var nonHissage = () => {
  console.log('Erreur! je ne suis pas hissé.');
};

Dans cet exemple, la déclaration de fonction hissage est appelée avant sa définition mais cela fonctionne quand même à cause du hissage. Cependant, la fonction fléchée nonHissage n'est pas hissée, de sorte que sa tentative d'appel avant la définition entraîne une erreur.

Conclusions

En résumé, les fonctions fléchées de ES6 sont un excellent outil pour écrire du code plus lisible et maintenable en JavaScript. Cependant, elles viennent avec leurs propres particularités, notamment l'absence de leur propre 'this' et l'absence de hissage. Comprendre ces différences est vital pour une utilisation correcte et efficace des fonctions fléchées.