Objets JavaScript
Vous connaissez déjà les fonctions et les closures : on peut regrouper la logique. Les pages réelles ont aussi besoin de données structurées : titre, prix et stock d’un produit vont ensemble. Un objet est une valeur qui porte plusieurs morceaux nommés.
Ce que signifie un objet
Un objet stocke des données liées sous forme de propriétés. Chaque propriété a une clé (key) — le nom — et une valeur (value). Au début, on écrit surtout un littéral d’objet : accolades { } avec des paires clé: valeur. Pas besoin de classe pour cette première étape.
Quatre pièces à surveiller
📊 Littéral, clé, valeur et accès
| Pièce | Rôle | Repère débutant |
|---|---|---|
| littéral d’objet | la valeur { … } assignée à une variable |
un sac de données liées |
| clé | le nom de propriété à gauche de : |
comment vous étiquetez le morceau |
| valeur | les données à droite de : |
chaîne, nombre, booléen, … |
| accès | lire ou écrire avec . ou [ ] |
comment vous atteignez un morceau plus tard |
Si vous pouvez montrer ces quatre, vous expliquez presque tout premier exemple d’objet. La surprise n’est souvent pas les accolades — c’est qu’une variable emporte désormais plusieurs champs nommés.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
Les accolades construisent l’objet
book est une valeur. Dedans, title et pages sont des propriétés. Les virgules séparent les paires. Après }, l’objet est prêt. Afficher book montre tout le sac dans la console.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
Le point atteint un champ
Nom de l’objet, point, puis clé : book.title. C’est la chaîne "Maps". La notation point est le chemin courant pour lire un nom de propriété connu. La clé doit ressembler à un identifiant valide sous cette forme.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
Les crochets atteignent aussi le champ
Ici book["title"] a la même valeur que book.title. Les crochets prennent une chaîne (ou une expression qui devient clé). Utilisez-les quand la clé est dans une variable, ou quand le nom n’est pas un simple identifiant. Pour les noms fixes, le point est souvent plus clair.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
Vous pouvez mettre à jour une propriété plus tard
L’affectation à book.pages change ce champ. L’objet reste le même sac ; une valeur à l’intérieur est nouvelle. Relire montre 140. Les leçons suivantes approfondissent l’ajout et la liste des propriétés — ici l’objectif est une première mise à jour claire.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
Les champs liés voyagent ensemble
name et price décrivent un article de boutique. Les garder sur un objet vaut mieux que deux globales séparées qui divergent. Quand vous passez item à une fonction ou le mettez sur la page, les deux champs bougent comme une unité.
Afficher un champ d’objet sur la page
Créez un petit objet produit, lisez une propriété, et placez ce texte dans un paragraphe.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
Le paragraphe affiche Lamp — 25. Changez seulement name ou price de l’objet, rafraîchissez, et lisez la nouvelle ligne. La suite approfondit les propriétés d’objet — le comportement des clés et le travail quotidien avec elles.
Étapes d’exercice
- Créez un objet à deux propriétés avec un littéral.
- Affichez une propriété avec le point dans la console.
- Affichez la même propriété avec crochets et clé chaîne.
- Modifiez une propriété et lisez la nouvelle valeur.
- Construisez un
itemavecnameetprice; affichez les deux champs. - Dans la démo HTML, changez seulement les valeurs de l’objet, rafraîchissez, lisez le paragraphe.
Pièges fréquents
- Traiter un objet comme une liste numérotée (c’est plutôt un tableau, plus tard dans le cours)
- Oublier les guillemets autour des valeurs chaîne —
title: Mapssans guillemets est faux - Confondre clé et valeur en expliquant le littéral
- Attendre des méthodes,
this, ou des outils profonds de propriétés dès cette première page — ils viennent plus tard - Créer une globale par champ au lieu d’un seul objet
Résumé
- Un objet regroupe des valeurs liées en propriétés nommées
- Un littéral a la forme
{ clé: valeur, … } - La notation point (
obj.key) lit une propriété connue - La notation crochets (
obj["key"]) lit avec une clé chaîne - Vous pouvez affecter une propriété pour la mettre à jour plus tard
- Les champs liés restent ensemble quand l’objet se déplace
- Les mises à jour de page peuvent construire des chaînes depuis les champs
- Suite : propriétés d’objet — travailler les clés plus en détail
🧠 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