Écrire des fonctions

Regrouper des instructions sous un nom, pour les réutiliser, les tester et les comprendre en un coup d'œil.

Objectifs de la séance

déclarer une fonction avec function, lui passer des paramètres et récupérer un résultat avec return ;
distinguer afficher (console.log) et renvoyer (return) ;
donner une valeur par défaut à un paramètre ;
protéger une fonction avec un retour anticipé (early return) ;
reconnaître une fonction pure et comprendre pourquoi c'est la meilleure habitude ;
comprendre la portée d'une variable.

Notions théoriques

Pourquoi des fonctions ?

Dans la partie 1, tout votre code était écrit « en vrac ». Si vous deviez calculer 3 pourcentages, il fallait copier-coller 3 fois la formule. Une fonction donne un nom à un bloc de code : on l'écrit une fois, on l'appelle autant de fois que nécessaire.

function direBonjour(prenom) {
  console.log(`Bonjour ${prenom} !`);
}

direBonjour("Alice");
direBonjour("Bob");

Bonjour Alice !
Bonjour Bob !

function annonce la déclaration ;
direBonjour est le nom (un verbe, en camelCase) ;
(prenom) est le paramètre : une variable qui reçoit la valeur donnée à l'appel ;
"Alice" est l'argument : la valeur réellement transmise.

Renvoyer un résultat avec `return`

Une fonction peut renvoyer une valeur à celui qui l'appelle.

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

const total = additionner(3, 4);
console.log(total); // 7

Afficher n'est pas renvoyer

console.log(...) affiche une valeur à l'écran : le programme ne peut plus s'en servir ensuite.
return ... renvoie la valeur à l'endroit où la fonction a été appelée : on peut la stocker, la calculer, la tester.

Une fonction sans return renvoie undefined. Dès qu'un return est exécuté, la fonction s'arrête.

Plusieurs paramètres et valeur par défaut

Un paramètre peut avoir une valeur par défaut, utilisée lorsque l'argument est absent.

function saluer(prenom, salutation = "Bonjour") {
  return `${salutation} ${prenom} !`;
}

console.log(saluer("Alice"));          // Bonjour Alice !
console.log(saluer("Alice", "Salut")); // Salut Alice !

Se protéger avec un retour anticipé

Une fonction robuste commence par écarter les cas invalides, puis traite le cas normal. C'est le motif du retour anticipé.

function calculerPourcentage(bonnesReponses, nombreQuestions) {
  // Cas invalide : on évite une division par zéro (qui donnerait Infinity ou NaN)
  if (nombreQuestions <= 0) {
    return 0;
  }

  return Math.round((bonnesReponses / nombreQuestions) * 100);
}

console.log(calculerPourcentage(7, 10)); // 70
console.log(calculerPourcentage(0, 0));  // 0 (et non NaN)

Bonne pratique - Garde d'abord, cas normal ensuite

Placer les cas particuliers en tête de fonction évite les if imbriqués : le cas normal reste à la fin, sans indentation supplémentaire, et se lit facilement.

Les fonctions pures

Une fonction est pure lorsque :

pour les mêmes arguments, elle renvoie toujours le même résultat ;
elle ne modifie rien en dehors d'elle-même (pas de variable globale changée, pas d'affichage, pas de fichier écrit).

calculerPourcentage est pure. Cette fonction ne l'est pas :

let total = 0;

function ajouterAuTotal(valeur) {
  total = total + valeur; // modifie une variable extérieure : effet de bord
}

Les fonctions pures sont faciles à tester (on connaît la réponse à l'avance), faciles à relire (tout ce qui compte est dans les paramètres) et sans mauvaise surprise. Dans React, elles sont indispensables : un composant se comporte comme une fonction pure de ses données.

Bonne pratique - Séparer calculer et afficher

Gardez les calculs dans des fonctions pures qui renvoient un résultat, et faites l'affichage (console.log) à un seul endroit, en dehors.

La portée : où vit une variable ?

Une variable déclarée avec const ou let n'existe que dans le bloc { } où elle est déclarée, et dans les blocs qu'il contient.

function doubler(nombre) {
  const resultat = nombre * 2; // resultat n'existe qu'ici
  return resultat;
}

console.log(doubler(4));
console.log(resultat); // ERREUR : resultat is not defined

Une variable locale ne pollue donc pas le reste du programme : deux fonctions peuvent chacune avoir leur variable resultat sans se gêner.

Test de mémorisation/compréhension

Que vaut resultat après : const resultat = afficherMessage(); (la fonction se termine par console.log("Bonjour"); sans return) ?

"Bonjour", car console.log renvoie le texte affiché

null, car la fonction ne renvoie rien de précis

undefined (aucun return dans la fonction)

Une erreur qui arrête le programme

0, car la valeur de retour par défaut est zéro

Que renvoie additionner(2, 3) avec : function additionner(a, b) { return a + b; } ?

"23"

undefined

NaN

Une erreur de syntaxe

Quelle est la valeur de saluer("Alice") avec : function saluer(prenom, salut = "Bonjour") { return `${salut} ${prenom}`; } ?

"undefined Alice"

" Alice"

Une erreur car le deuxième argument manque

"Bonjour ${prenom}"

"Bonjour Alice"

Laquelle de ces fonctions est une fonction pure ?

function doubler(n) { console.log(n * 2); }

function doubler(n) { return n * 2; }

function doubler(n) { total = total + n * 2; return total; }

function doubler(n) { return n * Math.random(); }

function doubler(n) { document.title = n * 2; return n * 2; }

Pourquoi écrire if (nombreQuestions <= 0) { return 0; } au début de calculerPourcentage ?

Pour que la fonction soit plus rapide à exécuter

Parce que JavaScript interdit de diviser par un nombre

Pour afficher un message d'erreur à l'utilisateur dans la console

Pour éviter une division par zéro (résultat invalide)

Pour convertir automatiquement le texte en nombre avant le calcul

Où existe la variable resultat déclarée avec const dans le corps d'une fonction ?

Dans tout le fichier JavaScript

Dans tous les fichiers du projet

Dans toutes les fonctions du programme

Nulle part, car const ne fonctionne qu'en dehors des fonctions

Uniquement dans cette fonction (dans son bloc)

TP pour réfléchir et résoudre des problèmes

Votre mission : transformer le bilan du quiz en fonctions réutilisables. Travaillez dans le fichier labo-js/fonctions.js.

Étape 1 — Une fonction pure et protégée

Écrivez calculerPourcentage(bonnesReponses, nombreQuestions) : elle renvoie le pourcentage arrondi, ou 0 si nombreQuestions n'est pas strictement positif.

Bonne pratique - Nommer par un verbe

Une fonction fait quelque chose : on la nomme avec un verbe (calculerPourcentage, direBonjour). Une variable décrit une chose : on la nomme avec un nom (pourcentage).

Étape 2 — L'appréciation

Écrivez appreciation(pourcentage) qui renvoie "Excellent" (80 et plus), "Bien" (50 et plus) ou "À revoir".

Bonne pratique - Pas besoin de else après un return

Comme return arrête la fonction, un else serait inutile : le code reste plat et très lisible.

Étape 3 — L'affichage

Écrivez afficherBilan(joueur, bonnesReponses, nombreQuestions). Cette fonction appelle les deux précédentes puis affiche le résultat (c'est la seule fonction qui affiche).

Bonne pratique - Une fonction, un rôle

calculerPourcentage calcule, appreciation juge, afficherBilan affiche. Chaque fonction est courte et se teste séparément : si le texte du bilan doit changer, une seule fonction est concernée.

📌 Une solution

Ce qu'il faut retenir

Notion	Résumé
Fonction	Bloc de code nommé : `function nom(parametres) { ... }`.
`return`	Renvoie une valeur et arrête la fonction. Sans `return`, la fonction renvoie `undefined`.
Valeur par défaut	`function f(a, b = 10)` : `b` vaut 10 si l'argument est absent.
Retour anticipé	Traiter les cas invalides en tête de fonction pour garder le cas normal lisible.
Fonction pure	Même arguments, même résultat, aucun effet sur l'extérieur : facile à tester.
Portée	Une variable déclarée dans un bloc `{ }` n'existe que dans ce bloc.

Aperçu de la prochaine séance

Vous savez écrire des fonctions. Dans la prochaine séance, vous découvrirez que une fonction est une valeur que l'on peut passer à une autre fonction (on parle de callback), ainsi que la syntaxe => des fonctions fléchées, omniprésente dans le code React et Expo.

Objectifs de la séance​

Notions théoriques​

Pourquoi des fonctions ?​

Renvoyer un résultat avec return​

Plusieurs paramètres et valeur par défaut​

Se protéger avec un retour anticipé​

Les fonctions pures​

La portée : où vit une variable ?​

Test de mémorisation/compréhension​