Créer une fonction nommée

Vous avez maintenant des tâches représentées par des objets, mais les afficher sous une forme cohérente demande de répéter les mêmes instructions à plusieurs endroits. Une fonction permet de regrouper cette opération et de la réutiliser. Dans cette leçon, vous allez écrire une fonction qui reçoit une tâche et renvoie une chaîne formatée, sans encore relier le résultat à la page.

Déclarer une fonction nommée

Une fonction nommée associe un nom à un ensemble d’instructions que vous pourrez exécuter en l’appelant. Vous pouvez la voir comme une petite opération dédiée : ici, elle transforme les informations d’une tâche en une chaîne destinée à être lue. Le nom formaterLibelle indique clairement l’action réalisée.

const taches = [
  { libelle: "Préparer le planning", terminee: false },
  { libelle: "Répondre aux messages", terminee: true }
];

function formaterLibelle(tache) {
  const etat = tache.terminee ? "Terminée" : "À faire";
  return `${etat} : ${tache.libelle}`;
}

const libelleFormate = formaterLibelle(taches[0]);
console.log(libelleFormate);

À faire : Préparer le planning

La ligne function formaterLibelle(tache) déclare la fonction et lui donne un nom. Le nom tache, placé entre parenthèses, est un paramètre : il représente la donnée que la fonction recevra lorsqu’elle sera appelée. Les accolades délimitent les instructions qui seront exécutées à chaque appel.

Transmettre une tâche et renvoyer un résultat

Dans formaterLibelle(taches[0]), vous appelez la fonction en lui transmettant le premier élément du tableau. Cet objet transmis est l’argument ; le paramètre tache permet aux instructions de la fonction de s’y référer. Vous avez déjà vu comment accéder aux propriétés d’un objet : ici, la fonction lit terminee et libelle pour construire le résultat.

Le mot-clé return renvoie une valeur à l’endroit où la fonction a été appelée. La chaîne renvoyée est affectée à libelleFormate, puis affichée dans la console. Une fonction qui renvoie une valeur ne l’affiche pas automatiquement : si vous voulez la voir dans la console, vous devez afficher le résultat de l’appel, comme dans cet exemple.

Comprendre la portée locale

La constante etat est déclarée à l’intérieur de la fonction. Elle est locale : vous pouvez l’utiliser dans le corps de formaterLibelle, mais elle n’est pas accessible en dehors de ce bloc. À l’inverse, taches et libelleFormate sont déclarées à l’extérieur de la fonction dans cet exemple.

Cette séparation rend la fonction plus facile à réutiliser : elle dépend de la tâche qu’on lui transmet, plutôt que d’un élément précis du tableau. Vous pouvez donc appeler formaterLibelle avec un autre objet tâche et obtenir son libellé formaté. Pour vérifier le second cas, remplacez l’appel dans l’exemple par formaterLibelle(taches[1]) : le résultat sera Terminée : Répondre aux messages.

Le tableau et les objets de cet exemple reprennent les formes étudiées dans les leçons précédentes ; la nouveauté est la fonction qui reçoit une tâche et renvoie une chaîne. Dans votre fichier js/main.js, remplacez les exemples temporaires par ce code et exécutez-le comme auparavant. La fonction ne modifie pas le tableau : elle calcule seulement une valeur de sortie à partir de l’objet reçu.

À retenir

• Une fonction nommée rassemble des instructions réutilisables sous un nom explicite.
• Le paramètre représente une donnée attendue ; l’argument est la valeur transmise lors de l’appel.
• `return` renvoie une valeur que vous pouvez stocker, afficher ou réutiliser.
• Une variable déclarée dans une fonction est locale à cette fonction.

Dans la prochaine leçon, vous ferez réagir la page aux actions de l’utilisateur ; la fonction de formatage pourra alors participer à l’affichage des tâches.