function, return, et fonctions fléchées
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Déclarer une fonction avec function
Créer une fonction nommée
2. Comprendre les paramètres
Les entrées de la fonction
3. Utiliser le mot-clé return
Retourner une valeur
4. Fonctions RETOURNENT des valeurs
Pas juste console.log!
5. Utiliser les fonctions fléchées =>
Syntaxe moderne et concise
6. Paramètres par défaut
Arguments optionnels
Pourquoi les fonctions
Un bloc de code réutilisable — l'analogie de la machine
Déclarer et appeler
function nom(params) { return resultat; }
⚠️ ERREUR LA PLUS COURANTE
return vs console.log — à insister lourdement!
Fonctions fléchées
const f = (n) => n * 2 — syntaxe courte
Paramètres par défaut
function f(x, y = 10) — rendre un argument optionnel
Calculer le double plusieurs fois
// Sans fonction... 😱
let a = 5;
console.log(a * 2); // 10
let b = 8;
console.log(b * 2); // 16
let c = 12;
console.log(c * 2); // 24
// On répète le même code! ❌
💡 Solution : Les fonctions!
Un bloc de code réutilisable
On la construit une fois, on l'utilise plusieurs fois
📥 Entrées
Paramètres
⚙️ Traitement
Corps de la fonction
📤 Sortie
Return
🎯 Construire la machine = Déclarer
🎯 Utiliser la machine = Appeler
function double(nombre) {
return nombre * 2;
}
double
Le nom
Comment l'appeler
(nombre)
Les paramètres
Les entrées
{ return ... }
Le corps
Le traitement
💡 On déclare une fois, on peut appeler autant de fois qu'on veut!
⚠️ Les parenthèses sont OBLIGATOIRES!
double
❌ La fonction elle-même
Ne fait rien!
double()
✅ Appelle la fonction
Exécute le code!
double(5); // Retourne 10
double(8); // Retourne 16
double(12); // Retourne 24
Les paramètres = les entrées de la machine
Ils permettent de personnaliser le comportement
function saluer(nom) {
return "Bonjour " + nom + "!";
}
saluer("Alice"); // "Bonjour Alice!"
saluer("Bob"); // "Bonjour Bob!"
💡 nom est un paramètre — il prend la valeur passée lors de l'appel
Ce que la fonction PRODUIT
return = la sortie de la machine
La fonction S'ARRÊTE au return
Rien après le return n'est exécuté
function double(n) {
return n * 2;
console.log("Jamais exécuté!");
}
return ≠ console.log
L'erreur la plus courante chez les débutants!
On va insister lourdement dessus
🎯 Une fonction RETOURNE une valeur
🎯 C'est l'appelant qui décide quoi faire du résultat
Utiliser console.log au lieu de return
function double(n) {
console.log(n * 2); // ❌ Affiche mais ne retourne rien!
}
⚠️ Problème :
La fonction affiche le résultat mais retourne undefined
let resultat = double(5);
console.log(resultat); // undefined! ❌
La fonction RETOURNE la valeur
L'appelant décide quoi faire du résultat
function double(n) {
return n * 2; // ✅ Retourne la valeur!
}
✅ Maintenant on peut utiliser le résultat :
let resultat = double(5);
console.log(resultat); // 10 ✅
console.log(resultat + 5); // 15 ✅ On peut réutiliser!
❌ console.log
function double(n) {
console.log(n * 2);
}
• Affiche dans la console
• Retourne undefined
• Impossible de réutiliser
✅ return
function double(n) {
return n * 2;
}
• Retourne la valeur
• L'appelant décide quoi faire
• Réutilisable!
🎯 Mémorisez : Une fonction RETOURNE, c'est l'appelant qui décide quoi faire!
Syntaxe moderne ES6
Plus courte pour les petites fonctions
=>
// Classique
function double(n) { return n * 2; }
// Fléchée
const double = (n) => n * 2;
const double = (n) => n * 2;
const
Variable
double
Nom
(n)
Paramètres
=> ...
Corps
💡 Paramètre unique = parenthèses optionnelles
const double = n => n * 2;
Une seule ligne = return automatique!
Pas besoin d'écrire return
Avec accolades (explicite)
const double = (n) => {
return n * 2;
}
Sans accolades (implicite)
const double = (n) => n * 2;
// ✅ Return automatique!
⚠️ Attention : Si accolades, il faut écrire return!
Fonctions fléchées
✅ Petites fonctions
✅ Une seule expression
✅ Callbacks
const double = n => n * 2;
function classique
✅ Fonctions plus longues
✅ Plusieurs instructions
✅ Besoin de this
function calculer(a, b) { ... }
🎯 Règle simple : const pour fléchées, function pour classiques
Rendre un argument optionnel
Si l'argument n'est pas fourni → utiliser la valeur par défaut
function saluer(nom = "Visiteur") {
return "Bonjour " + nom;
}
function saluer(nom = "Visiteur") {
return "Bonjour " + nom + "!";
}
saluer("Alice")
→ "Bonjour Alice!"
saluer()
→ "Bonjour Visiteur!" (valeur par défaut)
💡 Utile pour les options, configurations, valeurs de fallback
❌ #1 : console.log au lieu de return
function double(n) { console.log(n*2); } // Retourne undefined!
✅ Toujours utiliser return pour retourner une valeur
❌ #2 : Oublier les () pour appeler
let result = double; // La fonction, pas le résultat!
✅ double() pour appeler, pas double
❌ #3 : Confondre déclaration et appel
Déclaration = construire la machine
Appel = utiliser la machine
✅ On déclare une fois, on appelle plusieurs fois
🎯 return ≠ console.log
Une fonction RETOURNE, c'est l'appelant qui décide quoi faire
🎯 Fléchées : return implicite en une ligne
Pas besoin d'écrire return sans accolades
🎯 const pour fléchées, function pour classiques
Règle simple pour choisir la syntaxe
Déclaration
function nom(params) { return ...; }
→ Construire la machine
Appel
nom() avec parenthèses!
→ Utiliser la machine
Fonctions fléchées
const f = (n) => n * 2
→ Syntaxe courte
Paramètres par défaut
function f(x, y = 10)
→ Arguments optionnels
⚠️ N'oubliez jamais : return ≠ console.log!
1. Créer une fonction triple(n)
Retourne le triple d'un nombre
2. Créer une fonction saluer(nom, titre = "M.")
Utiliser un paramètre par défaut pour le titre
3. Convertir en fonction fléchée
Transformer function carre(n) { return n*n; } en fléchée
4. Corriger l'erreur
Trouver pourquoi cette fonction ne retourne rien:
function somme(a, b) { console.log(a + b); }
Les fonctions sont la base de la programmation
⚠️ N'oubliez jamais : return ≠ console.log!
C'est l'erreur #1 à éviter