Décrire une tâche avec un objet

Une tâche représentée par une simple chaîne ne permet pas de distinguer son nom de son état : « Préparer le repas » ne dit pas si elle est terminée. Pour faire évoluer le gestionnaire, vous allez regrouper ces informations dans un objet. Vous pourrez ainsi décrire chaque tâche de manière structurée, avant de relier ces données à l’interface dans les leçons suivantes.

Remplacer les chaînes par des objets

Vous avez déjà regroupé des libellés dans un tableau et appris à en consulter ou modifier les éléments. Ici, chaque élément du tableau devient un objet : il rassemble les informations qui décrivent une tâche. Un objet s’écrit entre accolades ; à l’intérieur, chaque propriété associe un nom à une valeur, séparés par deux-points. Les propriétés sont séparées entre elles par des virgules.

const taches = [
  {
    libelle: "Préparer le repas",
    terminee: false
  },
  {
    libelle: "Lire un chapitre",
    terminee: true
  }
];

console.log(taches[0]);
console.log(taches[1]);

{ libelle: "Préparer le repas", terminee: false }
{ libelle: "Lire un chapitre", terminee: true }

Chaque objet de cet exemple possède les mêmes propriétés : libelle contient le nom de la tâche et terminee indique son état avec une valeur booléenne. Le premier objet décrit une tâche en attente ; le second une tâche accomplie. Dans votre projet, ce tableau d’objets remplacera le tableau temporaire de chaînes utilisé dans js/main.js : ne gardez pas les deux déclarations de taches dans le même module.

Lire les propriétés

Pour accéder à une information, vous partez de l’objet concerné et indiquez le nom de la propriété. La notation pointée est la forme la plus directe lorsque vous connaissez le nom de la propriété à l’avance : écrivez le nom de l’objet, un point, puis le nom de la propriété. Vous pouvez également accéder à l’objet placé dans le tableau avec son index, comme dans les exemples précédents.

console.log(taches[0].libelle);
console.log(taches[0].terminee);
console.log(taches[1].libelle);

Préparer le repas
false
Lire un chapitre

La notation entre crochets offre une autre façon d’accéder à une propriété : placez son nom sous forme de chaîne entre crochets après l’objet. Elle est utile si le nom est stocké dans une variable, par exemple lorsqu’il est choisi par une autre partie du programme. Pour un nom connu directement, la notation pointée reste généralement plus lisible.

const nomPropriete = "libelle";

console.log(taches[0][nomPropriete]);
console.log(taches[0]["terminee"]);

Préparer le repas
false

Modifier l’état d’une tâche

Vous pouvez changer la valeur associée à une propriété en utilisant son accès comme à la lecture, puis en affectant une nouvelle valeur avec le signe =. Le nom du libellé reste inchangé ici, tandis que l’état passe de false à true. Comme taches est un tableau conservé dans une variable déclarée avec const, vous pouvez modifier son contenu sans réaffecter cette variable.

taches[0].terminee = true;
taches[1]["libelle"] = "Lire deux chapitres";

console.log(taches[0].terminee);
console.log(taches[1].libelle);
console.log(taches);

true
Lire deux chapitres
[
  { libelle: "Préparer le repas", terminee: true },
  { libelle: "Lire deux chapitres", terminee: true }
]

Vous pouvez tester le code dans le js/main.js déjà relié à la page : remplacez les exemples temporaires précédents par le premier extrait, puis ajoutez les instructions de lecture et de modification. Le fichier complet ci-dessous réunit ces étapes pour que vous puissiez vérifier le résultat d’un seul lancement. La console montre les valeurs avant et après la modification ; l’interface HTML n’est pas encore reliée au tableau.

const taches = [
  {
    libelle: "Préparer le repas",
    terminee: false
  },
  {
    libelle: "Lire un chapitre",
    terminee: true
  }
];

console.log(taches[0].libelle);
console.log(taches[0].terminee);

const nomPropriete = "libelle";
console.log(taches[1][nomPropriete]);

taches[0].terminee = true;
taches[1]["libelle"] = "Lire deux chapitres";

console.log(taches[0].terminee);
console.log(taches[1].libelle);
console.log(taches);

Préparer le repas
false
Lire un chapitre
true
Lire deux chapitres
[
  { libelle: "Préparer le repas", terminee: true },
  { libelle: "Lire deux chapitres", terminee: true }
]

À retenir

• Un objet regroupe des informations sous forme de propriétés nommées.
• Utilisez ici `libelle` pour le nom d’une tâche et `terminee` pour son état.
• Accédez à une propriété avec la notation pointée ou entre crochets.
• Vous pouvez modifier une propriété sans réaffecter le tableau déclaré avec `const`.
• Remplacez le tableau temporaire de chaînes par le tableau d’objets dans `js/main.js`.

Dans la prochaine leçon, vous apprendrez à créer une fonction nommée pour réutiliser des opérations sur vos données.