Objets — lire et écrire des propriétés

Gère un seul produit avec son nom, son prix, et son compte de stock dans des variables séparées, et les noms de variables entrent en collision dès que tu as un 2e produit. Regroupe-les dans un tableau à la place, et tu les gères par position — la personne qui écrit le code doit se souvenir si product[1] est le prix ou le compte de stock.

Un objet (une structure de données qui aligne des paires clé-valeur en une seule variable) te laisse plutôt obtenir et définir des valeurs par nom, comme dans product.price.

Construire des paires clé-valeur — les littéraux d'objet

Tu construis un objet en listant des paires clé: valeur, séparées par des virgules, entre { et }. Ça s'appelle un littéral d'objet (écrire des clés et des valeurs directement entre accolades pour construire un objet).

Chaque paire individuelle est une propriété (une paire clé-valeur qu'un objet détient). length, de l'article 4, est une propriété aussi — pour un objet, cette paire clé-valeur est exactement ce à quoi ce mot fait référence.

Une clé est une chaîne, et tu peux enlever les guillemets pour des noms comme name ou price. Une valeur peut être un nombre, une chaîne, ou un booléen — ou même un autre tableau ou objet. Écris la même clé deux fois, et seule celle écrite en dernier reste.

Pour lire une valeur, écris un point après l'objet suivi du nom de la clé, comme dans product.price. C'est la notation pointée (écrire un nom de clé directement après un point pour lire une propriété).

L'ordre dans lequel tu as écrit les choses n'a pas d'importance pour la lecture, donc pas besoin de s'en souvenir.

Lire une clé non enregistrée ne lève pas d'erreur — ça renvoie undefined, comme lire un index hors limites sur un tableau.

const product = {
  name: "Souris sans fil",
  price: 3980,
  stock: 24,
};

console.log(product.name);    // Souris sans fil
console.log(product.price);   // 3980

// Lire une clé non enregistrée ne lève pas d'erreur
console.log(product.color);   // undefined

// Écraser utilise la même syntaxe qu'une affectation
product.stock = 23;
console.log(product.stock);   // 23

Regroupe le profil d'un membre dans un seul objet et extrais les champs dont tu as besoin. Les valeurs à utiliser sont dans les commentaires de la console.

① Crée un objet avec 3 propriétés : name, plan, et points.

② Affiche le nom et le plan sur une ligne, formatés comme « Alice Kim / Standard ».

③ Affiche les points.

④ Lis la propriété non enregistrée email et affiche-la telle quelle.

(Si tout s'exécute correctement, une explication apparaîtra.)

Mettre un objet à l'intérieur d'un objet

Comme des données de commande renvoyées par une API, parfois un seul enregistrement doit contenir un ensemble supplémentaire d'informations. Mets un objet comme valeur, et il s'imbrique — tu peux enchaîner . pour lire jusqu'au fond, comme dans order.customer.name.

Fais attention quand une clé au milieu de la chaîne manque.

order.shipping.address utilise . sur order.shipping, qui vaut undefined, et ça s'arrête avec un TypeError. Une façon de lire à travers une étape manquante sans s'arrêter est couverte dans le prochain article.

const order = {
  orderId: "ORD-1042",
  customer: {
    name: "Léa Fontaine",
    email: "lea@example.com",
  },
  total: 12800,
};

console.log(order.customer.name);    // Léa Fontaine
console.log(order.customer.email);   // lea@example.com

// Tu peux enchaîner des opérations de chaîne sur une valeur extraite
console.log(order.customer.name.length);   // 12

Préciser une clé avec une chaîne ou une variable — la notation entre crochets

Sur un écran où l'utilisateur choisit quel champ afficher, quelle clé lire n'est pas décidé au moment où tu écris le code. La notation pointée écrit le nom de la clé directement dans le code, donc ça ne fonctionne pas ici.

Écris une chaîne entre [], comme dans product["price"], et cette chaîne se fait lire comme la clé. C'est la notation entre crochets (lire une propriété en utilisant la chaîne écrite entre crochets comme clé).

Ce qui est dans [] est d'abord évalué, et le résultat sert de nom de clé — tu peux même écrire quelque chose comme product["item" + "Name"]. Mets une variable là-dedans, et la clé se décide à l'exécution.

La notation pointée ne fonctionne que pour les noms de clés sans symboles ni espaces qui ne commencent pas par un chiffre. Une clé comme "date-sortie", avec un tiret, ne peut se lire qu'avec la notation entre crochets.

const product = {
  name: "Souris sans fil",
  price: 3980,
  "date-sortie": "2026-04-01",
};

// Écrit le nom de la clé directement comme une chaîne
console.log(product["price"]);          // 3980

// Le nom de la clé vit dans une variable
const field = "name";
console.log(product[field]);            // Souris sans fil

// Une clé avec un symbole ne peut se lire qu'avec la notation entre crochets
console.log(product["date-sortie"]);   // 2026-04-01

// La notation pointée chercherait une clé littéralement nommée "field"
console.log(product.field);             // undefined

Lis une valeur avec la clé donnée par une variable, pour que le champ que tu affiches puisse changer à l'exécution. product est déjà déclaré.

① Mets en place une variable contenant un nom de champ, et affiche le prix en lisant à travers cette variable.

② Change le contenu de cette même variable pour le nom du champ stock, et affiche le compte de stock.

③ Affiche la valeur de la clé qui contient un tiret.

④ Lis le nom du produit avec la notation pointée et la notation entre crochets, et affiche s'ils sont identiques.

Ajouter, retirer, et vérifier des propriétés

Comme des données sur un écran de paramètres, certains objets gagnent des champs avec le temps, ou perdent des champs qui ne sont plus utilisés. Tu peux ajouter ou retirer des propriétés sur un objet même après sa création.

Ajouter, c'est juste assigner une valeur à une clé qui n'existe pas encore. Écris settings.notifications = true;, et une nouvelle propriété apparaît directement là. Comme avec les tableaux, tu peux ajouter ou retirer même sur un objet déclaré avec const.

Pour en retirer une, écris delete settings.language;. delete (un opérateur qui retire une propriété d'un objet) retire la clé entièrement, donc la lire ensuite renvoie undefined.

Vérifie si une clé existe avec "language" in settings. in (un opérateur qui renvoie si une clé existe sur un objet, sous forme de true ou false) prend une chaîne de nom de clé à gauche et un objet à droite.

Même une propriété dont la valeur est undefined renvoie true, tant que la clé elle-même existe.

Un nom de clé mal orthographié ne lève pas d'erreur

Lis une clé qui n'existe pas, comme member.piont, et l'exécution ne s'arrête pas — ça renvoie simplement undefined. Sans erreur, tu pourrais ne pas le remarquer avant qu'un affichage apparaisse vide ou qu'un calcul se transforme en NaN. Pour vérifier si une clé existe, utilise in, comme dans "points" in member.

const settings = {
  theme: "dark",
  language: "fr",
};

// Ajouter est juste une affectation
settings.notifications = true;
console.log(settings.notifications);   // true

// delete retire la clé entièrement
delete settings.language;
console.log(settings.language);        // undefined

// in renvoie si la clé existe
console.log("language" in settings);   // false
console.log("theme" in settings);      // true

// Même avec une valeur undefined, true si la clé existe
settings.theme = undefined;
console.log("theme" in settings);      // true

Ajoute et retire des champs sur un objet de paramètres d'application, et vérifie ce qui reste. settings est déjà déclaré.

① Ajoute un champ notifications, pour recevoir des notifications ou non, avec la valeur true.

② Retire le champ language.

③ Vérifie et affiche, l'un après l'autre, si le champ que tu as ajouté et celui que tu as retiré existent encore.

④ Affiche le contenu de l'objet settings tel quel après les changements.

Extraire clés et valeurs ensemble — Object.keys / values / entries

Quand tu veux compter combien de paramètres existent, ou lister chaque champ enregistré, écrire chaque nom de clé un par un ne passe pas à l'échelle. Convertis le contenu d'un objet en tableau, et chaque opération de tableau devient disponible.

Object.keys(object) renvoie un tableau de juste les clés. Object.values(object) renvoie un tableau de juste les valeurs, et Object.entries(object) renvoie un tableau de paires [clé, valeur], chacune un tableau à 2 éléments.

Aucune d'elles ne change l'objet original.

Puisque ce qui revient est un tableau, tu peux compter les champs avec length, les joindre avec join, ou les chercher avec includes. Object.keys(settings).length est exactement le nombre de propriétés de l'objet.

const order = {
  orderId: "ORD-1042",
  customer: "Léa Fontaine",
  total: 12800,
};

// Extrait juste les clés / juste les valeurs comme tableaux
console.log(Object.keys(order).join(", "));       // orderId, customer, total
console.log(Object.values(order).join(" / "));    // ORD-1042 / Léa Fontaine / 12800

// Compte les champs avec length du tableau
console.log(Object.keys(order).length);           // 3

// entries renvoie un tableau de paires [clé, valeur]
console.log(Object.entries(order)[1].join(": ")); // customer: Léa Fontaine

Extrais le contenu d'un objet commande sous forme de clés, valeurs, et paires, et liste-les. order est déjà déclaré.

① Extrais juste les clés, jointes avec « , », et affiche-les.

② Affiche si « Léa Fontaine » est incluse parmi les valeurs.

③ Affiche combien de paires clé-valeur il y a.

④ Formate chaque paire, l'une après l'autre, comme « clé: valeur », et affiche les 3 lignes.