Fonctions fléchées
Vous savez déjà déclarer une fonction, passer des arguments et renvoyer une valeur avec return. Beaucoup d’aides du quotidien sont assez courtes pour que le mot-clé function complet paraisse lourd. JavaScript permet aussi de les écrire avec une flèche — le jeton => — sur une ligne plus serrée.
Ce qu’est une fonction fléchée
C’est toujours une fonction : des entrées, un corps, éventuellement un résultat. Seule la forme change. On la range souvent dans const, on liste les paramètres, on écrit =>, puis une expression courte ou un bloc { }.
Flèche à côté de la fonction classique
📊 Fonction classique vs flèche
| Idée | Style classique | Style flèche |
|---|---|---|
| aide nommée | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| renvoyer une expression | return a + b; dans { } |
l’expression après => revient seule |
| plusieurs instructions | { } plus return |
même règle : { } et return |
| un paramètre | (name) |
name => ... (parenthèses optionnelles) |
| sans paramètres | function hi() { ... } |
const hi = () => ... — () vides obligatoires |
| où elle vit | déclaration ou expression | presque toujours dans une variable |
Les deux styles peuvent renvoyer nombres et chaînes. Préférez la flèche quand l’aide est petite et que vous voulez un nom clair en const. Préférez function classique quand un bloc nommé doit ressortir — les deux sont du JavaScript valide.
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
Le corps expression renvoie tout seul
Après =>, une seule expression est évaluée et renvoyée automatiquement. Pas de { } ni du mot return. Ici double(5) devient 10. Changez l’argument ; le produit suit.
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
Les accolades : vous contrôlez le return
Quand le corps utilise { }, JavaScript ne renvoie pas automatiquement la dernière ligne. Écrivez return vous-même, comme pour une fonction classique. Les sorties anticipées et la logique en plusieurs étapes restent lisibles.
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
Un paramètre peut omettre les parenthèses
S’il y a exactement un paramètre, vous pouvez écrire name => ... sans ( ). Le site d’appel ne change pas : greet("Sara"). Avec deux paramètres ou plus, gardez les parenthèses.
const hello = () => "Hello";
console.log(hello());
Zéro paramètre exige encore ()
Sans entrées, écrivez des parenthèses vides avant =>. Les omettre est une erreur de syntaxe. L’appel reste hello() — la paire vide signifie « aucun paramètre ».
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
Nommez-la, puis appelez-la
const add = (a, b) => a + b range la flèche sous add. Vous l’appelez comme toute fonction : add(3, 4) renvoie 7. La même aide, deux appels — sans réécrire le corps.
Une flèche sur la page
Construisez un message de bienvenue avec une flèche, appelez-la et écrivez le résultat dans un paragraphe — même schéma de page, forme plus courte.
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
Le paragraphe affiche Hello, Omar. La flèche a renvoyé la chaîne ; la ligne suivante l’a placée sur la page. Changez seulement l’argument, rechargez et lisez la nouvelle ligne. La leçon suivante porte sur la portée — où ces noms sont visibles.
Exercices
- Réécrivez
function triple(n) { return n * 3; }en flècheconstà corps expression. - Écrivez
const hi = name => "hi " + nameet journalisezhi("Neda"). - Écrivez
const ping = () => "pong"et appelez une fois. - Écrivez une flèche à corps bloc qui renvoie
"zero"sin === 0, sinon"nonzero". - Après
const add = (a, b) => a + b, vérifiez queadd(6, 1)donne7. - Dans la démo HTML, changez seulement la chaîne d’argument, rechargez et lisez le paragraphe.
Pièges fréquents
- Ouvrir
{ }après=>et oublierreturn— l’appel donneundefined - Supprimer
()quand il y a zéro paramètre - Confondre
=>avec des opérateurs de comparaison — la flèche est une syntaxe de fonction, pas « plus grand que » - Attendre ici un cours complet sur
this— les différences de liaison sont pour plus tard ; ici c’est la forme compacte - Croire que les flèches remplacent la connaissance de
return— les expressions renvoient encore ; les blocs ont encore besoin dereturn
Résumé
- Les fonctions fléchées utilisent
=>et vivent souvent dansconst - Une expression nue après
=>se renvoie automatiquement - Un corps
{ }exige unreturnexplicite - Un paramètre peut omettre
( ); zéro paramètre exige des()vides - Appelez la flèche par son nom comme toute autre fonction
- La page peut utiliser une chaîne renvoyée par une flèche
- Ensuite : portée — où vivent les noms
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut