Écrire des fonctions avec paramètres et valeur de retour, donner des valeurs par défaut, utiliser les fonctions fléchées (lambdas) et passer une fonction en paramètre (callback).
Sur le site d'une agence de voyages de Marrakech, le prix d'un séjour se calcule à plusieurs endroits : la page d'accueil, la fiche du séjour, le panier. Copier le même calcul trois fois, c'est trois fois plus de risques d'erreur. On l'écrit une seule fois dans une fonction, et on l'appelle partout.
La fonction prixTotal est définie une fois. Ses paramètres sont nuits, prixNuit et personnes (1 par défaut).
function prixTotal(nuits, prixNuit, personnes = 1) { // paramètres, dont un par défaut
const total = nuits * prixNuit * personnes; // variable locale
return total; // valeur renvoyée
}
prixTotal(3, 450); // 1350 (arguments)
prixTotal(3, 450, 2); // 2700
return donne la sortie et termine la fonction.calculerTotal, afficherListe.const formaterPrix = (montant) => `${montant} DH`;
const prixTotal = (nuits, prixNuit, personnes = 1) => {
const total = nuits * prixNuit * personnes;
return total; // avec des accolades, return est obligatoire
};
En JavaScript, une fonction est une valeur : on peut la ranger dans une variable et la passer en paramètre à une autre fonction. On l’appelle alors une fonction de rappel (callback) :
setTimeout(() => console.log('3 secondes plus tard'), 3000);
[1, 2, 3].forEach((n) => console.log(n * 10));
bouton.addEventListener('click', () => { ... }); // partie D
Cette idée est partout en JavaScript : tableaux (B.7), événements (D), AJAX (E).
On met des oranges (les paramètres), on appuie, et le jus sort (la valeur de retour). On ne sait pas forcément ce qui se passe dedans, on sait juste quoi donner et ce qu'on reçoit.
function prixSejour(nuits, prixNuit) { return nuits * prixNuit; } prixSejour(3, 450); // 1350
Pour une petite fonction d'une ligne, la flèche => évite d'écrire function et return.
const prixSejour = (nuits, prixNuit) => nuits * prixNuit;
Quelle est la différence entre ces deux fonctions ? Que vaut x dans chaque cas ? function a(n) { console.log(n * 2); } function b(n) { return n * 2; } const x = a(5); const y = b(5);
a(5) affiche 10 dans la console mais ne renvoie rien : x vaut undefined. b(5) n'affiche rien mais renvoie 10 : y vaut 10, on peut le réutiliser (l'afficher, l'additionner, le mettre dans la page...).
Réécrivez avec une fonction fléchée : function tva(prix) { return prix * 0.2; }
const tva = (prix) => prix * 0.2; // avec un seul paramètre, les parenthèses sont facultatives : const tva2 = prix => prix * 0.2;
Écrivez une fonction appliquer(liste, operation) qui affiche le résultat de operation pour chaque élément de liste. Appelez-la pour afficher le double de [10, 20, 30].
function appliquer(liste, operation) { for (const x of liste) { console.log(operation(x)); } } appliquer([10, 20, 30], (n) => n * 2); // 20, 40, 60