Propriétés d’objet
Le littéral et la lecture par point sont déjà dans la boîte à outils. Sur un vrai formulaire, le sac lui-même bouge : une couleur apparaît quand l’acheteur la choisit, un drapeau de brouillon disparaît à l’enregistrement, et une ville habite dans l’adresse. Cette page, c’est ce travail quotidien sur les propriétés.
Après le premier littéral
La page des objets a monté le sac et lu un champ. Ici vous changez quelles clés existent : vous ramenez un nom qui manquait, vous lâchez un nom devenu inutile, vous demandez si un nom est là, vous entrez dans un objet rangé dans un autre, et vous listez les noms que vous tenez vraiment.
Cinq gestes sur une propriété
📊 Ajouter, retirer, tester, imbriquer, lister
| Geste | Écriture | Ce que vous obtenez |
|---|---|---|
| ajouter | item.color = "blue" |
propriété neuve sur le même objet |
| retirer | delete item.draft |
cette clé n’est plus là |
| présence | "sku" in item |
true ou false |
| imbriquer | user.address.city |
champ dans un autre objet |
| lister | Object.keys(user) |
tableau des clés propres |
Nomme le geste et la ligne suit. Ajouter ne frappe pas un second objet. Retirer ne change pas la valeur en chaîne vide. Une liste de noms n’est pas le même métier que lire une valeur.
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);
L’affectation fait grandir une clé absente
item a commencé avec seulement name et price. Comme color manquait, item.color = "blue" la crée. Vous gardez un seul objet, désormais avec trois propriétés. La console affiche blue.
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);
delete soulève la clé
delete item.draft enlève cette propriété, pas l’objet entier. Ensuite "draft" in item vaut false. Le nom et le prix restent. Stocker "" ou null est un autre geste : la clé demeure, avec une valeur neuve.
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);
in répond oui ou non à propos de la clé
"name" in item vaut true — ce nom est sur l’objet. "sku" in item vaut false — vous ne l’avez jamais ajouté. Une propriété absente se lit undefined, et un undefined stocké se lit pareil. in interroge la clé, pas la valeur assise là.
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);
Une propriété peut tenir un autre objet
address n’est pas une chaîne. C’est un objet avec city et zip. user.address.city fait deux pas : dans address, puis dans city. La console affiche Shiraz. Imbriquer garde les morceaux d’adresse ensemble, au lieu d’aplatir chacun sur user.
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);
Object.keys vous tend les noms
Object.keys(user) renvoie un tableau des clés propres — ici ["name", "role"]. La valeur se lit encore avec un point ou des crochets. La liste sert quand vous ne voulez pas chaque nom écrit d’avance. Elle n’imprime pas les valeurs toute seule.
Choisissez le geste, puis tapez
Champ neuf ? Affectez-le. Clé qui doit disparaître ? delete. Oui ou non ? in. Ville dans une adresse ? Imbriquez, puis suivez les points. Seulement les noms ? Object.keys. Les fonctions rangées sur l’objet — les méthodes — sont la leçon suivante.
Pose une ville imbriquée sur la page après un ajout
Partez d’un utilisateur et d’une adresse, ajoutez plan dans le script, et placez la ville dans un paragraphe.
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>
Le paragraphe montre Shiraz — yearly. La ville était déjà imbriquée ; plan est arrivé après le littéral. Changez seulement city ou plan, rechargez, et lisez la nouvelle ligne. Leçon suivante : méthodes d’objet — fonctions qui vivent sur l’objet.
Étapes d’exercice
- Construisez un objet à deux propriétés, ajoutez-en une troisième par affectation, et affichez-la.
- Posez
draft, retirez-la avecdelete, et vérifiez"draft" in item. - Sur un objet qui n’a que
name, affichez"name" in itemet"sku" in item. - Imbriquez
addressaveccity, puis affichezuser.address.city. - Affichez
Object.keyspour un objet à deux clés et lisez le tableau. - Dans la démo HTML, changez seulement
cityouplan, rechargez, et lisez le paragraphe.
Faux pas fréquents
- Croire que
item.color = "blue"frappe un objet tout neuf — c’est le même qui grandit - Écrire
item.draft = nullalors que vous vouliezdelete item.draft— la clé reste - Traiter une clé absente et un
undefinedstocké comme la même question — pour la clé, prendsin - Écrire
user.cityalors quecityvit suruser.address - Attendre que
Object.keysrenvoie les valeurs - Chercher méthodes et
thissur cette page — c’est la leçon suivante
En bref
- Affecter une clé absente ajoute cette propriété
deleteretire la clé ; le reste de l’objet reste"key" in objdit si la clé existe- Une propriété peut tenir un autre objet ; des points en plus avancent dedans
Object.keysrenvoie les noms, pas les valeurs- Un champ imbriqué et un champ tout juste ajouté peuvent partager une ligne sur la page
- Ensuite : méthodes d’objet — fonctions stockées sur l’objet
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut