🧱 Le cours : structurer des données
En JavaScript, presque tout est un objet. Un objet littéral est la façon la plus simple de regrouper des informations qui décrivent une même chose : un élève, un produit, un réglage. C'est aussi la forme des données que s'échangent les sites web (JSON).
Lire et écrire des propriétés
On accède à une propriété avec le point (eleve.nom) ou avec des crochets (eleve["nom"]). Les crochets servent quand le nom de la clé est dans une variable ou n'est pas un identifiant valide (objet["mon-champ"]). Lire une propriété qui n'existe pas donne undefined ; en revanche lire une propriété de undefined ou null lève une TypeError (d'où ?., voir Conditions). Quand la variable porte le même nom que la clé, on écrit { nom, age } au lieu de { nom: nom, age: age }.
Méthodes et this
Une propriété dont la valeur est une fonction est une méthode. À l'intérieur, this désigne l'objet sur lequel on l'appelle : compte.deposer(50) exécute deposer avec this égal à compte.
const compte = {
titulaire: "Lina",
solde: 100,
deposer(montant) {
this.solde += montant;
return this.solde;
},
resume() {
return `${this.titulaire} : ${this.solde} euros`;
},
};
compte.deposer(50);
console.log(compte.resume());
AffichageLina : 150 euros
Décomposition et spread
La décomposition extrait des propriétés dans des variables (const { nom, age } = eleve;). Le spread ...objet copie toutes les propriétés d'un objet dans un nouveau, ce qui permet de « modifier sans modifier » : on copie puis on écrase ce qui change.
const eleve = { nom: "Lina", age: 17 };
const { nom, age } = eleve;
const majeur = { ...eleve, age: 18, classe: "Tle" };
console.log(nom, age);
console.log(JSON.stringify(majeur));
AffichageLina 17
{"nom":"Lina","age":18,"classe":"Tle"}
Parcourir un objet
Object.keys(o), Object.values(o) et Object.entries(o) renvoient des tableaux (clés, valeurs, paires) que l'on parcourt avec for…of, map, etc. Un objet n'est pas itérable directement : for (const x of objet) lève une erreur.
const notes = { maths: 14, nsi: 17, anglais: 12 };
let somme = 0;
for (const [matiere, note] of Object.entries(notes)) {
somme += note;
console.log(`${matiere} : ${note}`);
}
console.log(`moyenne : ${(somme / 3).toFixed(1)}`);
Affichagemaths : 14
nsi : 17
anglais : 12
moyenne : 14.3
Un tableau d'objets : la forme des vraies données
Une liste d'élèves, de produits ou de messages est presque toujours un tableau d'objets. filter, map, reduce et sort (voir Tableaux) travaillent alors sur les propriétés.
const eleves = [
{ nom: "Lina", note: 15 },
{ nom: "Sami", note: 9 },
{ nom: "Nova", note: 18 },
];
const admis = eleves.filter((e) => e.note >= 10).map((e) => e.nom);
const meilleur = eleves.reduce((m, e) => (e.note > m.note ? e : m));
console.log(admis.join(", "));
console.log(meilleur.nom);
JSON : échanger des données
JSON (*JavaScript Object Notation*) est un format texte qui ressemble à un objet JavaScript, avec des règles plus strictes : clés entre guillemets doubles, pas de virgule finale, pas de fonctions ni de undefined. JSON.stringify(valeur) fabrique le texte (un troisième argument, 2, l'indente pour le rendre lisible) et JSON.parse(texte) reconstruit l'objet ; ce dernier lève une exception si le texte n'est pas du JSON valide. C'est le format des réponses des serveurs (voir Asynchrone).
const texte = '{"nom":"Lina","notes":[12,15]}';
const donnees = JSON.parse(texte);
console.log(donnees.notes[1]);
console.log(JSON.stringify(donnees, null, 2));
try {
JSON.parse("{nom: 'Lina'}");
} catch (erreur) {
console.log("JSON invalide");
}
Affichage15
{
"nom": "Lina",
"notes": [
12,
15
]
}
JSON invalide
Les classes
Quand on crée beaucoup d'objets de même forme, une classe évite de recopier les mêmes propriétés et méthodes. Le constructor initialise l'objet créé avec new ; extends crée une classe qui hérite d'une autre, et une méthode redéfinie dans la classe fille remplace celle de la mère (polymorphisme, comme en POO Java).
class Animal {
constructor(nom) {
this.nom = nom;
}
crier() {
return "...";
}
presenter() {
return `${this.nom} dit ${this.crier()}`;
}
}
class Chien extends Animal {
crier() {
return "Ouaf !";
}
}
console.log(new Animal("Inconnu").presenter());
console.log(new Chien("Rex").presenter());
AffichageInconnu dit ...
Rex dit Ouaf !
Sous le capot, les classes JavaScript sont du sucre syntaxique sur les prototypes. Tu peux aussi déclarer des propriétés privées avec # (#solde), des méthodes static et des accesseurs get / set.
Copier un objet
Comme pour les tableaux, const b = a; ne copie pas : les deux noms désignent le même objet. { ...a } fait une copie superficielle (les objets imbriqués restent partagés) ; structuredClone(a) fait une copie complète. Object.freeze(a) empêche toute modification (superficielle aussi).
