Regrouper des données et des comportements dans un objet littéral, lire et modifier ses propriétés, écrire des méthodes avec this, parcourir un objet et créer des objets semblables avec une classe.
Pour la fiche d'un appartement à louer à Tétouan, il faut la ville, le quartier, le nombre de chambres, le loyer, la disponibilité, et un moyen de calculer le loyer annuel. Plutôt que six variables séparées, on range tout dans un seul objet : l'appartement.
L'objet appart regroupe ses propriétés sous la forme clé : valeur.
const appart = {
ville: 'Tétouan', // propriété : clé et valeur
loyer: 2800,
equipements: ['cuisine', 'balcon'],
loyerAnnuel() { // méthode
return this.loyer * 12; // this : l'objet lui-même
},
};
appart.ville // lire
appart['loyer'] // lire avec une clé calculée
appart.loyer = 3000; // modifier
appart.surface = 85; // ajouter
delete appart.surface; // supprimer
'ville' in appart // true : la propriété existe
appart.loyerAnnuel() // appeler une méthode
Une constante const appart ne peut pas être réaffectée, mais son contenu peut changer.
for (const cle in appart) {
console.log(`${cle} = ${appart[cle]}`);
}
Object.keys(appart) // ['ville', 'loyer', ...]
Object.values(appart)
Object.entries(appart) // [['ville', 'Tétouan'], ...]
class Appartement {
constructor(ville, loyer) {
this.ville = ville;
this.loyer = loyer;
}
loyerAnnuel() { return this.loyer * 12; }
}
const a = new Appartement('Martil', 4500);
C’est la même idée que les classes Python du module 03 : la classe est le moule, new fabrique un objet.
Une carte d'identité regroupe plusieurs informations sur une même personne : nom, prénom, date de naissance, ville. Un objet JavaScript regroupe des propriétés sous la forme clé : valeur.
const personne = { nom: 'Alaoui', prenom: 'Salma', ville: 'Tétouan', }; personne.ville; // "Tétouan"
Un téléphone a des caractéristiques (marque, batterie) et des actions (appeler, photographier). Les actions d'un objet sont ses méthodes ; dedans, this désigne l'objet lui-même.
const tel = { batterie: 80, charger() { this.batterie = 100; }, };
L'agence a 50 appartements. Écrivez une classe Appartement avec un constructeur (ville, loyer) et une méthode loyerAnnuel(), puis créez deux objets.
class Appartement { constructor(ville, loyer) { this.ville = ville; this.loyer = loyer; } loyerAnnuel() { return this.loyer * 12; } } const a1 = new Appartement('Tétouan', 3000); const a2 = new Appartement('Martil', 4500); console.log(a2.loyerAnnuel()); // 54000
Récupérez ville et loyer de l'objet appart en une seule ligne.
const { ville, loyer } = appart; console.log(ville, loyer); // Tétouan 3000
Que vaut a.loyer après ce code ? const a = { loyer: 2000 }; const b = a; b.loyer = 9999; Comment faire une vraie copie ?
a.loyer vaut 9999 : a et b désignent le même objet (copie de la référence). Vraie copie (superficielle) : const b = { ...a }; // ou Object.assign({}, a)