Découper avec des fonctions

Objectifs

À la fin de cette leçon, vous saurez :

• définir et appeler une fonction ;
• passer des paramètres et retourner une valeur ;
• distinguer le nom, les paramètres et le corps ;
• découper un problème en petites fonctions.

🔗 Pour vous rafraîchir la mémoire : conditions et boucles

Le problème

let a = 5;
let b = 10;

let somme1 = a + b;
console.log(somme1);

let c = 20;
let d = 30;

let somme2 = c + d;
console.log(somme2);

Le même calcul apparaît deux fois. Une fonction groupe le calcul sous un nom, et ce nom devient le mot que la suite du programme réutilise :

function addition(a, b) {
  return a + b;
}

console.log(addition(5, 10));
console.log(addition(20, 30));

Dans addition(5, 10), addition est le nom de la fonction, 5 et 10 sont les arguments passés lors de l'appel ; ils sont reçus par les paramètres a et b.

Anatomie

function addition(a, b) {
  //     ↑↑↑  les paramètres (les valeurs d'entrée)
  return a + b;
  //      ↑ la valeur qui est rendue à l'appelant
}

• Déclaration : function addition(...).
• Appel : addition(5, 10).
• Exécution : le corps s'exécute avec a = 5, b = 10, puis return renvoie 15 et termine la fonction.
• Sans return, la fonction renvoie undefined.

Choix simple : une fonction, une responsabilité

Le principe pour tout l'avenir : une fonction fait une chose. Pas « tout calculer, afficher et sauvegarder » dans un seul bloc : calculer, afficher et sauvegarder méritent trois fonctions différentes. Vous approfondirez ce principe bien plus loin dans le cursus ; dès maintenant, appliquez-le par réflexe.

Valeur de retour vs effet

function addition(a, b) {
  return a + b;      // calcule et rend la valeur
}

function affiche(a, b) {
  console.log(a + b); // calcule et affiche directement
}

• Le premier rend une valeur : le programme peut l'utiliser ailleurs (une variable, un calcul).
• Le second affiche, mais ne rend rien : la valeur calculée est perdue aussitôt ! Vérifiez :

console.log(addition(4, 4));  // 8
const total = addition(4, 4);
console.log(total);           // 8

Paramètres : par valeur et ordre

function pairEst(entier) {
  return entier % 2 === 0;
}

Les paramètres prennent la valeur passée selon l'ordre : appel avec 2, entier reçoit 2. L'appelant peut passer un littéral ou une variable.

La fonction comme brique

function descriptif(nom, age) {
  return `${nom} a ${age} ans.`;
}

console.log(descriptif("Paul", 20));    // Paul a 20 ans.
console.log(descriptif("Marie", 32));   // Marie a 32 ans.

Exercice

1. Écrivez addition4(a, b) et testez-la sur plusieurs couples.
2. Écrivez estPair(n) qui retourne un booléen correct.
3. Écrivez majuscule(texte) qui retourne le texte en lettres capitales (toUpperCase).
4. Écrivez pseudo(entier) qui retourne l'étiquette de la valeur : « positif », « négatif » ou « zéro ».
5. Écrivez presente(nom, age) qui construit la phrase : Bonjour Paul, vous avez 20 ans.
6. Décomposez ce calcul en 2 fonctions : une aire(r) pour π × r × r (utilisez Math.PI), une peri(r) pour 2 × π × r.

Indices

Sur l'ordre : l'ordre définit la correspondance : le 1er argument arrive dans le 1er paramètre, le 2e dans le 2e… Des noms clairs aident à éviter la confusion.

Sur la chaîne :

function presente(nom, age) {
  return `Bonjour ${nom}, vous avez ${age} ans.`;
}

Sur Math : Math.PI est une constante. 2 * Math.PI * r est une multiplication à gauche, sans tableau.

Résumé

• Une fonction regroupe un calcul sous un nom ; un appel l'exécute.
• return rend une valeur ; sans lui, la fonction renvoie undefined.
• Une fonction = une responsabilité : nom, entrée, sortie, corps.
• Les fonctions se composent : une fonction peut employer une autre fonction.

function addition4(a, b) {
  return a + b;
}

function estPair(n) {
  return n % 2 === 0;
}

function majuscule(texte) {
  return texte.toUpperCase();
}

function pseudo(entier) {
  if (entier > 0) {
    return "positif";
  } else if (entier < 0) {
    return "négatif";
  } else {
    return "zéro";
  }
}

function aire(r) {
  return Math.PI * r * r;
}

function peri(r) {
  return 2 * Math.PI * r;
}

console.log(addition4(5, 3));        // 8
console.log(estPair(8));             // true
console.log(majuscule("cours"));     // COURS
console.log(pseudo(-3));             // négatif
console.log(aire(2));                // 12.566...
console.log(peri(2));                // 12.566...

function somme(a, b) {
  console.log(a + b);   // Rien n'est retourné !
}
console.log(somme(5, 3));   // undefined