2.5 Fonction en flèche

Dans cette vidéo, nous découvrons une nouvelle syntaxe pour créer des fonctions en JavaScript : les fonctions fléchées, ou arrow functions. Elles permettent d'écrire des fonctions plus concises et résolvent un problème historique du mot-clé this. C'est une syntaxe que vous croiserez en permanence dans le code React.

Avantages des fonctions fléchées

  • Syntaxe plus courte que function classique.
  • Le mot-clé this conserve le contexte d'exécution.
  • Parenthèses optionnelles avec un seul argument.
  • Return implicite si une seule expression.

Une fonction fléchée se stocke généralement dans une const. On omet le mot-clé function et on remplace la définition par une flèche =>. Pour un seul argument, les parenthèses deviennent optionnelles. Si le corps de la fonction tient en une seule expression, on peut même omettre les accolades et le mot-clé return, ce qui donne une écriture très concise. 

// Fonction classique
function printMyName(name) {
  console.log(name);
}

// Fonction fléchée équivalente
const printMyName = (name) => { console.log(name); };

// Avec un seul argument, parenthèses optionnelles
const printMyName = name => console.log(name);

// Return implicite
const multiplier = num => num * 2;
console.log(multiplier(2));   // 4

Vous verrez ces différentes syntaxes au fil du cours. Ne cherchez pas à tout mémoriser maintenant : avec la pratique, vous reconnaîtrez vite chaque variante et vous saurez choisir la plus appropriée. L'essentiel est de comprendre que toutes ces écritures sont équivalentes à une fonction classique, en plus court et avec un comportement de this plus prévisible.

En résumé

Cette leçon explique la syntaxe des fonctions fléchées en JavaScript, une alternative plus courte et plus moderne aux fonctions déclarées classiques. Elle met en avant les deux principaux avantages : une syntaxe concise qui omet le mot-clé `function`, et un comportement du mot-clé `this` qui conserve toujours son contexte d'origine, contrairement aux fonctions normales. Le cours détaille ensuite les différents raccourcis syntaxiques possibles pour écrire les fonctions fléchées de manière encore plus compacte.

Points clés

  • Les fonctions fléchées utilisent la syntaxe `() => {}` avec une flèche et sont plus courtes que les fonctions normales
  • Le mot-clé `this` conserve toujours son contexte d'origine dans les fonctions fléchées, ce qui évite les problèmes rencontrés avec les fonctions classiques
  • Avec un seul paramètre, les parenthèses autour du paramètre peuvent être omises (ex: `x => x * 2`)
  • Pour les fonctions dont le corps ne contient qu'une seule expression à retourner, les accolades et le mot-clé `return` peuvent être omis
  • Les fonctions fléchées sans paramètre nécessitent impérativement des parenthèses vides `()`

Questions fréquentes

Quel est le principal avantage des fonctions fléchées par rapport aux fonctions classiques?

Le principal avantage est une syntaxe plus concise et le fait que le mot-clé `this` conserve toujours son contexte original, contrairement aux fonctions normales où `this` peut ne pas faire référence à ce qu'on attendrait.

Peut-on omettre les parenthèses autour des paramètres?

Oui, mais uniquement si la fonction a exactement un seul paramètre. Avec zéro paramètre ou plusieurs paramètres, les parenthèses sont obligatoires.

Comment écrire une fonction fléchée qui retourne simplement le résultat d'une expression?

On peut omettre les accolades et le mot-clé `return` pour écrire la fonction sur une seule ligne. Par exemple: `const multiply = x => x * 2` retourne automatiquement le résultat de la multiplication.