Les objets

Un objet regroupe des valeurs liées sous des noms. Dans { name: "Coco", age: 3 }, pet.name donne "Coco" et pet.age donne 3.

Des valeurs avec des étiquettes

Un tableau convient à une liste de choses semblables dans un ordre. Beaucoup de choses du monde se décrivent mieux par un ensemble de faits étiquetés : un animal a un nom, une espèce et un âge ; un produit a un titre, un prix et un stock. Un objet stocke exactement cela. C'est un ensemble de propriétés, et chaque propriété est une clé (l'étiquette) associée à une valeur.

const pet = {
  name: "Coco",
  kind: "cat",
  age: 3,
};
console.log(pet.name);        // affiche Coco
console.log(pet["kind"]);     // affiche cat
console.log(pet.age + 1);     // affiche 4

Un objet s'écrit entre accolades, chaque propriété sous la forme clé: valeur et des virgules entre elles. Une virgule après la dernière propriété est autorisée. Pour lire une propriété, écris l'objet, un point et la clé : pet.name. L'autre forme utilise des crochets et une chaîne : pet["kind"]. Les crochets sont nécessaires quand la clé est rangée dans une variable, comme dans pet[field], ou quand elle contient une espace. Lire une clé qui n'existe pas donne undefined.

Modifier et ajouter des propriétés

Affecte une valeur à une propriété pour la modifier, et à une nouvelle clé pour en ajouter une. Comme pour les tableaux, cela fonctionne même quand l'objet a été déclaré avec const, car la variable désigne toujours le même objet.

const player = { name: "Sam", score: 0 };
player.score += 10;
player.level = 2;
console.log(`${player.name} ${player.score} ${player.level}`);   // affiche Sam 10 2
delete player.level;
console.log(player.level);   // undefined (propriété supprimée)

Des listes d'objets

Tableaux et objets se combinent naturellement. Un tableau d'objets est la façon dont la plupart des programmes stockent des enregistrements : un panier, une liste de classe, des résultats de recherche. On parcourt le tableau et on lit dans chaque objet les propriétés dont on a besoin.

const basket = [
  { item: "pen", price: 2 },
  { item: "book", price: 12 },
  { item: "bag", price: 25 },
];
let total = 0;
for (const line of basket) {
  total += line.price;
}
console.log("Total:", total);   // affiche Total: 39

Les valeurs d'un objet peuvent être n'importe quoi, y compris des tableaux et d'autres objets. const user = { name: "Ana", tags: ["admin", "editor"] }; permet d'écrire user.tags[0] pour atteindre "admin". Lis ces chaînes de gauche à droite : pars de user, va à sa propriété tags, puis prends l'indice 0.

Les méthodes et les clés d'un objet

Une propriété dont la valeur est une fonction s'appelle une méthode. Tu appelles des méthodes depuis le début : console.log est la méthode log de l'objet console, et Math.round est la méthode round de Math. Dans une méthode, le mot-clé this désigne l'objet sur lequel la méthode a été appelée : une méthode peut donc lire les propriétés de son propre objet. Enfin, Object.keys(pet) donne un tableau des clés, ici ["name", "kind", "age"], utile pour parcourir toutes les propriétés.

const counter = {
  count: 0,
  add() {
    this.count++;
  },
};
counter.add();
counter.add();
console.log(counter.count);   // affiche 2

Exemple corrigé. Une fiche de livre { title: "Notes", pages: 120, read: 45 } peut indiquer la progression avec Math.round(book.read / book.pages * 100), qui vaut 38, c'est-à-dire 38 pour cent. Nommer les valeurs pages et read rend la formule lisible, ce que b[1] / b[0] ne ferait jamais.

Tableau ou objet ?

Un test rapide permet de choisir. Si les valeurs sont des choses de même nature et que leur ordre compte, comme les notes d'une classe ou les étapes d'une recette, utilise un tableau et atteins-les par leur position. Si les valeurs sont des faits différents sur une même chose, comme le nom, le prix et le stock d'un produit, utilise un objet et atteins-les par leur nom. La plupart des données réelles mélangent les deux : un tableau de produits, où chaque produit est un objet. Quand tu affiches un objet dans la zone d'exercice, tu le vois sous une forme compacte comme {"name":"Coco","age":3} ; lire les propriétés une par une donne un affichage plus propre.