Cours sur les Fonctions en JavaScript
En JavaScript, les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code, d'éviter la répétition et de
simplifier la maintenance.
1. Déclaration d'une Fonction
a) Déclaration avec function
La manière classique de déclarer une fonction :
function nomDeLaFonction(param1, param2) {
// Code à exécuter
return resultat; // Optionnel
}
Exemple :
function addition(a, b) {
return a + b;
}
console.log(addition(5, 3)); // Affiche 8
b) Fonction Fléchée (Arrow Function, ES6+)
Syntaxe plus concise, souvent utilisée pour des fonctions anonymes ou des callbacks.
const nomDeLaFonction = (param1, param2) => {
return resultat;
};
Exemple :
const addition = (a, b) => a + b; // Retour implicite si une seule ligne
console.log(addition(5, 3)); // Affiche 8
c) Fonction Anonyme (sans nom)
Souvent utilisée comme callback ou dans des expressions.
const maFonction = function(a, b) {
return a * b;
};
2. Paramètres et Arguments
Paramètres : Variables définies dans la déclaration de la fonction.
Arguments : Valeurs passées lors de l'appel de la fonction.
a) Valeurs par défaut (ES6+)
Si un argument n'est pas fourni, on peut définir une valeur par défaut.
function saluer(nom = "Invité") {
console.log("Bonjour, " + nom + " !");
}
saluer(); // "Bonjour, Invité !"
saluer("Alice"); // "Bonjour, Alice !"
b) Paramètres REST ( ... ) (ES6+)
Permet de gérer un nombre variable d'arguments sous forme de tableau.
function somme(...nombres) {
return nombres.reduce((acc, num) => acc + num, 0);
}
console.log(somme(1, 2, 3)); // 6
3. Retour de Fonction ( return )
Une fonction peut retourner une valeur avec return .
Si aucun return , la fonction retourne undefined .
Exemple :
function estPair(n) {
return n % 2 === 0;
}
console.log(estPair(4)); // true
4. Fonctions Pures vs Effets de Bord
Fonction Pure :
Même entrée ⇒ Même sortie.
Ne modifie pas les variables externes.
function carre(x) {
return x * x; // Pure
}
Fonction avec Effet de Bord :
Modifie des variables externes ou dépend de l'état global.
let compteur = 0;
function incrementer() {
compteur++; // Effet de bord
}
5. Fonctions d'Ordre Supérieur
Une fonction qui :
Prend une autre fonction en argument, ou
Retourne une fonction.
a) Fonction comme argument (Callback)
function appliquerOperation(a, b, operation) {
return operation(a, b);
}
const resultat = appliquerOperation(5, 3, (x, y) => x + y);
console.log(resultat); // 8
b) Fonction retournant une fonction (Closure)
function multiplierPar(facteur) {
return function(nombre) {
return nombre * facteur;
};
}
const doubler = multiplierPar(2);
console.log(doubler(5)); // 10
6. Fonctions Récursives
Une fonction qui s'appelle elle-même.
⚠️ Toujours avoir une condition d'arrêt pour éviter une boucle infinie.
Exemple : Factorielle
function factorielle(n) {
if (n <= 1) return 1; // Condition d'arrêt
return n * factorielle(n - 1); // Appel récursif
}
console.log(factorielle(5)); // 120 (5! = 5×4×3×2×1)
7. Méthodes vs Fonctions
Fonction : Bloc de code indépendant.
Méthode : Fonction attachée à un objet.
const objet = {
nom: "Alice",
saluer: function() {
console.log("Bonjour, " + this.nom);
}
};
objet.saluer(); // "Bonjour, Alice"
8. Bonnes Pratiques
✔ Nommage clair : calculerMoyenne , verifierEmail
✔ Fonctions courtes (une seule responsabilité)
✔ Éviter les effets de bord quand possible
✔ Documenter avec des commentaires si nécessaire
Exercices Pratiques
1. Écris une fonction max(a, b) qui retourne le plus grand des deux nombres.
2. Crée une fonction estPalindrome(str) qui vérifie si une chaîne est un palindrome.
3. Écris une fonction sommeTableau(arr) qui calcule la somme des éléments d'un tableau.
4. Défi : Implémente une fonction récursive fibonacci(n) qui retourne le n-ième terme de la suite de Fibonacci.
Conclusion
Les fonctions sont fondamentales en JavaScript.
Utilise-les pour structurer ton code.
Maîtrise les arrow functions, callbacks et closures pour du code plus propre.
Pratique avec des exercices pour bien assimiler !
Si t'as des questions, fais-moi signe !
