Les différences entre les fonctions fléchées et les fonctions normales en JavaScript : Quand utiliser l'une ou l'autre ?

JavaScript, un langage de programmation omniprésent, offre deux types de fonctions : les fonctions normales et les fonctions fléchées. Bien qu'elles soient similaires en termes de fonctionnalité, il existe des différences notables entre elles. Comprendre ces différences est essentiel pour savoir quand utiliser l'une ou l'autre. 

1. Syntaxe

La syntaxe est la première différence entre les deux types de fonctions. Les fonctions normales sont définies en utilisant le mot-clé function, suivi du nom de la fonction, des parenthèses pour les arguments et des accolades pour le corps de la fonction.

```javascript```

function maFonction(arg1, arg2) {

 // corps de la fonction

}        

Les fonctions fléchées, en revanche, utilisent une syntaxe plus concise. Elles sont définies sans le mot-clé function, et une flèche `=>` est utilisée pour séparer les arguments du corps de la fonction.

```javascript```

let maFonction = (arg1, arg2) => {
 // corps de la fonction
}        

Quand utiliser quoi ?

Si vous recherchez une syntaxe plus concise et plus moderne, les fonctions fléchées sont un excellent choix. Elles sont particulièrement utiles pour les fonctions de rappel courtes et les fonctions qui sont passées en tant qu'arguments à d'autres fonctions, comme dans le cas des méthodes de tableau de haut niveau (`map`, `filter`, `reduce`, etc.).

2. Le mot-clé `this`

Le comportement du mot-clé `this` diffère également entre les deux types de fonctions. Dans une fonction normale, `this` est défini par la manière dont la fonction est appelée. Il ne correspond pas nécessairement à l'objet qui a défini la fonction.

Dans une fonction fléchée, cependant, `this` est lexicalement ou statiquement lié. Cela signifie que `this` se réfère toujours à l'objet qui a défini la fonction fléchée.

Quand utiliser quoi ?

Si vous travaillez avec des méthodes d'objet où vous voulez que `this` se réfère à l'objet contenant la méthode, une fonction normale est généralement le meilleur choix. Par exemple :

```javascript```

let monObjet = {

 valeur: 'Hello, World!',

 afficher: function() {

  console.log(this.valeur);

 }

}

monObjet.afficher(); // Affiche 'Hello, World!'        

Si vous travaillez avec des fonctions de rappel, en particulier celles associées à des événements ou des méthodes de tableau de haut niveau, les fonctions fléchées sont souvent préférables car elles permettent de conserver le contexte de `this` de la portée englobante.

3. Constructeur et prototype

Les fonctions normales sont constructibles et peuvent être utilisées avec le mot-clé `new`. Elles ont également une propriété `prototype` qui permet d'ajouter des méthodes et des propriétés à toutes les instances d'un objet.

Les fonctions fléchées, en revanche, ne sont pas constructibles et ne peuvent pas être utilisées avec le mot-clé `new`. De plus, elles n'ont pas de propriété `prototype`.

Quand utiliser quoi ?

Si vous créez une fonction qui doit être utilisée comme un constructeur ou si vous devez ajouter des méthodes à la propriété `prototype` pour toutes les instances d'un objet, vous devez utiliser une fonction normale.

4. Arguments

Dans une fonction normale, vous pouvez utiliser l'objet `arguments` pour accéder à tous les arguments passés à la fonction, indépendamment du nombre d'arguments que la fonction attend officiellement.

Les fonctions fléchées, cependant, ne possèdent pas leur propre objet `arguments`. Si vous essayez d'accéder à `arguments` dans une fonction fléchée, elle se référera à l'objet `arguments` de la fonction englobante.

Quand utiliser quoi ?

Si vous avez besoin d'accéder à l'objet `arguments` dans votre fonction, une fonction normale est le meilleur choix. 

En conclusion, bien que les fonctions normales et les fonctions fléchées en JavaScript puissent souvent être utilisées de manière interchangeable, il est important de comprendre leurs différences pour choisir la plus appropriée en fonction du contexte.

Elvin Kyungu, frontend web developer

Abonnez-vous à mon github