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.