Les fonctions en JavaScript

Chapitre 10 — Les fonctions en JavaScript · Les fonctions en JavaScript

1. Pourquoi des fonctions ?

Une fonction est un bloc d'instructions auquel on donne un nom, pour pouvoir l'exécuter autant de fois que nécessaire. Elle évite de recopier le même code (si le calcul change, on ne le corrige qu'à un endroit), elle rend le programme lisible (calculerMoyenne(notes) se comprend sans lire le détail) et elle permet de tester chaque morceau séparément.

JavaScript fournit de nombreuses fonctions prêtes à l'emploi (parseInt, Math.max, alert… leçon 10.6) ; dans cette leçon, vous écrivez les vôtres.

Figure 1 — Les parties d'une fonction, et la différence entre paramètres et arguments.

2. Déclarer, appeler, renvoyer

// 1. Déclarer une fonction : nom, paramètres, corps, valeur de retour
function aireRectangle(largeur, hauteur) {
  return largeur * hauteur;
}

// 2. L'appeler avec des arguments
console.log("Aire 4 × 3 =", aireRectangle(4, 3));
console.log("Aire 2,5 × 2 =", aireRectangle(2.5, 2));

// 3. Une fonction sans return renvoie undefined
function saluer(prenom) {
  console.log(`Bonjour ${prenom} !`);
}
const resultat = saluer("Amina");
console.log("Valeur renvoyée par saluer :", resultat);

// 4. return arrête la fonction immédiatement
function mention(note) {
  if (note < 0 || note > 20) return "note invalide";
  if (note >= 16) return "Très bien";
  if (note >= 14) return "Bien";
  if (note >= 12) return "Assez bien";
  if (note >= 10) return "Passable";
  return "Insuffisant";
}
for (const n of [17, 13.5, 10, 7, 25]) console.log(`${n} → ${mention(n)}`);

// 5. Une déclaration de fonction est « remontée » : on peut l'appeler avant de l'écrire
console.log("Double de 21 :", doubler(21));
function doubler(x) {
  return x * 2;
}

// 6. Trop ou pas assez d'arguments : pas d'erreur !
console.log("aireRectangle(4)       =", aireRectangle(4));        // hauteur vaut undefined
console.log("aireRectangle(4, 3, 9) =", aireRectangle(4, 3, 9));  // 9 est ignoré

// 7. Une fonction est une valeur : on peut la ranger dans une variable
const calcul = aireRectangle;
console.log("typeof calcul =", typeof calcul, "| calcul(5, 5) =", calcul(5, 5));

Résultat dans la console

Aire 4 × 3 = 12
Aire 2,5 × 2 = 5
Bonjour Amina !
Valeur renvoyée par saluer : undefined
17 → Très bien
13.5 → Assez bien
10 → Passable
7 → Insuffisant
25 → note invalide
Double de 21 : 42
aireRectangle(4)       = NaN
aireRectangle(4, 3, 9) = 12
typeof calcul = function | calcul(5, 5) = 25

• Déclarer: le mot-clé function, un nom, des paramètres entre parenthèses (éventuellement aucun), le corps entre accolades.
• Appeler: le nom suivi de parenthèses contenant les arguments. Sans parenthèses (aireRectangle), on désigne la fonction sans l'exécuter.
• Renvoyer: return valeur renvoie un résultat et arrête la fonction. Sans return, la fonction renvoie undefined. Une fonction qui calcule doit renvoyer son résultat, et laisser à l'appelant le soin de l'afficher.
• JavaScript ne vérifie ni le nombre ni le type des arguments : un argument manquant vaut undefined (d'où le NaN), un argument en trop est ignoré.
• Une déclaration de fonction est remontée (hoisting) : on peut l'appeler plus haut dans le fichier. Inutile donc de placer les fonctions dans le <head>.

3. Bien nommer et bien découper

• Un nom de fonction suit les règles des variables (lettres, chiffres, _ et $, pas d'espace, pas de chiffre au début) et la convention camelCase.
• Commencez par un verbe qui dit ce que fait la fonction : calculerMoyenne, afficherErreur, estValide (qui renvoie un booléen).
• Une fonction = une seule tâche, en quelques lignes. Si vous devez écrire « et » pour décrire ce qu'elle fait, découpez-la.

Variables globales et variables locales →