Fonctions flèchées
Notions théoriques
Nous avons déjà vu un concept fondamental de la programmation : Les fonctions.
En JavaScript, une fonction est un bloc de code conçu pour effectuer une tâche particulière.
Une fonction est exécutée lorsque quelque chose l'invoque (l'appelle).
Pour déclarer une fonction en JavaScript, nous utilisons le mot-clé function suivi du nom de la fonction, puis des parenthèses () qui peuvent contenir des paramètres.
Le code de la fonction est écrit entre accolades {}. Voici un exemple :
function direBonjour() {
console.log("Bonjour !");
}
Cette fonction, lorsqu'elle est appelée, affiche "Bonjour !" dans la console.
Une autre façon de déclarer des fonctions en JavaScript est d'utiliser des fonctions fléchées.
Les fonctions fléchées sont une syntaxe plus courte pour écrire des fonctions.
Voici comment nous pourrions réécrire la fonction direBonjour en utilisant une fonction fléchée :
const direBonjour = () => {
console.log("Bonjour !");
}
Les fonctions fléchées sont particulièrement utiles lorsqu'on travaille avec des fonctions qui prennent d'autres fonctions en argument, comme c'est souvent le cas en JavaScript.
Exemple pratique
Supposons que nous voulons écrire une fonction qui prend 2 nombres en argument et renvoie leur somme.
Voici comment nous pourrions le faire :
function ajouter(n1, n2) {
return n1 + n2;
}
console.log(ajouter(5, 3)); // Affiche 8
Et voici comment nous pourrions écrire la même fonction en utilisant une fonction fléchée :
const ajouter = (n1, n2) => {
return n1 + n2;
}
console.log(ajouter(5, 3)); // Affiche 8
Différence entre une fonction nommée et une fonction fléchée
En JavaScript, nous avons vu qu'il existe 2 façons d’écrire une fonction :
- La fonction nommée (ou classique)
- La fonction fléchée (introduite avec ES6)
1. Fonction nommée (classique)
C’est la forme traditionnelle. Elle utilise le mot-clé function et peut être appelée avant sa déclaration grâce au mécanisme de hoisting.
function direBonjour() {
console.log("Bonjour !");
}
direBonjour(); // Affiche "Bonjour !"
- ✅ Peut être appelée avant sa déclaration
- ✅ Dispose de son propre
this - ✅ Facile à lire et à comprendre
2. Fonction fléchée
La fonction fléchée est une syntaxe plus concise. Elle est souvent utilisée pour des fonctions courtes ou anonymes.
const direBonjour = () => {
console.log("Bonjour !");
}
direBonjour(); // Affiche "Bonjour !"
- ✅ Syntaxe plus courte
- ❌ Ne peut pas être appelée avant sa déclaration
- ❌ Ne crée pas son propre
this(elle hérite duthisdu contexte parent)
| Caractéristique | Fonction nommée | Fonction fléchée |
|---|---|---|
| Syntaxe | function nom() { ... } | const nom = () => { ... } |
| Hoisting (appel avant) | ✅ Oui | ❌ Non |
this | ✅ Propre à la fonction | ❌ Hérite du contexte parent |
| Utilisation | Fonctions générales | Fonctions courtes, callbacks, méthodes anonymes |
Bon à savoir : Pour des raisons de clarté et de lisibilité, on utilise souvent les fonctions fléchées dans les cas simples, et les fonctions classiques lorsqu'on a besoin d’un comportement plus complet (comme l’accès à
thisou au nom de la fonction).
Une fonction fléchée peut avoir un nom, mais d'une manière un peu différente des fonctions traditionnelles.
Une fonction fléchée peut être stockée dans une variable, et c'est cette variable qui a un nom.
Voici un exemple :
const maFonction = () => {
console.log("Bonjour !");
}
maFonction(); // Affiche "Bonjour !"
Dans cet exemple,
maFonctionest le nom de la variable qui contient la fonction fléchée. On peut ensuite appeler la fonction en utilisant ce nom de variable.
Pourquoi parle-t-on de "fonction nommée" pour une fonction classique, alors qu’une fonction fléchée peut aussi avoir un nom ?
1. Fonction nommée : une question de définition
Quand on parle de fonction nommée, on fait référence à une fonction qui a un nom explicite dans sa déclaration, comme ceci :
function direBonjour() {
console.log("Bonjour !");
}
Ici, le nom de la fonction est directement défini : direBonjour.
Ce type de fonction est dit nommée car :
- Elle a un identifiant propre (le nom
direBonjour) - Ce nom est accessible dans la portée (utile pour la récursivité ou le débogage)
- Elle peut être hoistée (appelée avant sa déclaration)
2. Fonction fléchée avec un nom ? Oui, mais indirectement
Quand on écrit une fonction fléchée comme ceci :
const direBonjour = () => {
console.log("Bonjour !");
};
La fonction n’est pas nommée en soi. C’est une fonction anonyme affectée à une variable appelée direBonjour.
- La variable a un nom (
direBonjour) - Mais la fonction elle-même n’a pas de nom interne explicite
- Cela peut avoir un impact sur les messages d’erreur ou la récursivité
💡 En réalité, JavaScript attribue souvent automatiquement un "nom" à la fonction à partir de la variable, mais ce n’est pas la même chose qu’une déclaration nommée.
3. Une distinction plus précise
Pour être plus rigoureux, on peut distinguer :
| Type de fonction | Exemple | Nom réel ? | Hoisting ? |
|---|---|---|---|
| Fonction nommée déclarée | function maFonction() {} | ✅ Oui | ✅ Oui |
| Fonction anonyme affectée à une variable | const f = function() {} | ❌ Non | ❌ Non |
| Fonction fléchée affectée à une variable | const f = () => {} | ❌ Non | ❌ Non |
| Fonction nommée affectée à une variable | const f = function maFonction() {} | ✅ Oui | ❌ Non |
On parle souvent de "fonction nommée" pour désigner les fonctions classiques déclarées avec function, car elles ont :
- un nom explicite
- un comportement particulier (hoisting,
this, etc.)
Même si une fonction fléchée peut être assignée à une variable nommée, elle reste techniquement anonyme dans sa déclaration, sauf dans certains cas avancés.
Une fonction fléchée peut avoir un nom via une variable, mais ce n’est pas une fonction nommée au sens strict de la déclaration classique. La différence réside dans la syntaxe de déclaration et le comportement interne.
Paramètres vs Arguments : quelle différence ?
Ces deux termes sont souvent utilisés de manière interchangeable, mais ils ne désignent pas la même chose, même s’ils sont étroitement liés.
Paramètres
Les paramètres sont les variables définies dans la déclaration d’une fonction.
Ils servent de placeholders (emplacements) pour les valeurs que la fonction recevra.
function saluer(nom) {
console.log("Bonjour " + nom);
}
Ici, nom est un paramètre de la fonction saluer.
Arguments
Les arguments sont les valeurs réelles que l’on passe à la fonction lorsqu’on l’appelle.
saluer("Alice");
Ici, "Alice" est un argument passé à la fonction saluer.
| Terme | Moment d’utilisation | Exemple dans function saluer(nom) {} |
|---|---|---|
| Paramètre | Lors de la déclaration de la fonction | nom (variable) |
| Argument | Lors de l’appel de la fonction | "Alice" (valeur) |
Dans la pratique (et parfois dans la documentation), on utilise parfois le mot "argument" pour désigner les deux, par abus de langage ou pour simplifier.
Bon usage
- Dans la déclaration → on parle de paramètres
- Dans l’appel → on parle d’arguments
💡 Astuce mnémotechnique :
Paramètre = dans la Proclamation (déclaration)
Argument = dans l’Appel
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Dans ce TP, vous allez approfondir votre compréhension des fonctions fléchées en réécrivant une fonction au format classique sous forme d'une fonction fléchée.
Avant de passer à la version fléchée, assurez-vous de bien comprendre comment écrire une fonction en utilisant la syntaxe classique.
Bien sûr ! Voici la version classique (non fléchée) de la fonction calculerAge, en respectant le même formalisme que précédemment.
TP : Version classique de la fonction calculerAge
Avant de passer à la version fléchée, assurez-vous de bien comprendre comment écrire une fonction en utilisant la syntaxe classique.
Version classique
Écrire une fonction calculerAge en utilisant le mot-clé function.
Cette fonction doit :
- Prendre en paramètre une année de naissance.
- Calculer l'âge actuel de la personne.
- Retourner cet âge.
L'année actuelle peut être obtenue avec :
new Date().getFullYear()
Exemple d'utilisation
console.log(calculerAge(2000)); // Affiche l'âge de la personne née en 2000
À faire
Complétez le code suivant :
function calculerAge(anneeNaissance) {
...
}
console.log(calculerAge(2000)); // Affiche l'âge de la personne née en 2000
Une solution possible
Vous devez être connecté pour voir le contenu.
Version fléchée
Vous devez écrire la fonction calculerAge en utilisant une fonction fléchée.
Cette fonction prend toujours une année de naissance en paramètre, et retourne l'âge de la personne en se basant sur l'année actuelle.
Contraintes
- Utilisez une fonction fléchée.
- Stockez la fonction dans une constante appelée
calculerAge. - La fonction doit retourner l'âge, sans afficher directement dans la console.
À faire
Complétez le code suivant :
const calculerAge = (anneeNaissance) => {
...
}
console.log(calculerAge(1990)); // Affiche l'âge de la personne née en 1990
Vérifiez que votre fonction fonctionne bien pour différentes années de naissance.
Une solution possible
Vous devez être connecté pour voir le contenu.