Les objets
Décrire une chose (une question, un joueur) avec plusieurs informations réunies sous un seul nom.
Objectifs de la séance
- créer un objet
{ cle: valeur }et lire ses propriétés avec le point ; - modifier, ajouter une propriété, et comprendre ce que
constprotège vraiment ; - imbriquer des objets ;
- lire une donnée qui peut manquer sans planter, grâce à
?.; - donner une valeur de remplacement avec
??.
Notions théoriques
Un objet, c'est une fiche
En PHP, vous écrivez un tableau associatif : ["nom" => "Alice", "age" => 17]. En JavaScript, on écrit un objet : des paires
clé : valeur séparées par des virgules, entre accolades.
const question = {
id: 1,
enonce: "Quel mot de passe est le plus robuste ?",
niveau: 1,
estActive: true,
};
console.log(question.enonce);
console.log(question.niveau);
Quel mot de passe est le plus robuste ?
1
enonce,niveau... sont les propriétés (les clés) ;- on lit une propriété avec le point :
question.enonce; - les valeurs peuvent être de n'importe quel type : texte, nombre, booléen, objet, liste, fonction...
On peut aussi utiliser les crochets : question["niveau"]. C'est utile quand le nom de la propriété est dans une variable.
const nomPropriete = "niveau";
console.log(question[nomPropriete]); // 1
Modifier et ajouter
question.niveau = 2; // modifier
question.indice = "Pensez à la longueur"; // ajouter une propriété
console.log(question);
Afficher un objet entier avec console.log montre toutes ses propriétés, ce qui est précieux pour comprendre ce que contient une variable.
const question = {...} interdit de remplacer la variable (question = autreChose; provoque une erreur), mais pas de modifier les propriétés
de l'objet. const protège la « boîte », pas ce qu'elle contient.
Dans ce cours (et dans React), nous prendrons l'habitude de ne pas modifier un objet existant mais d'en créer une copie modifiée. Vous apprendrez comment à la séance 3.
Des objets dans des objets
Une propriété peut elle-même contenir un objet.
const question = {
id: 1,
enonce: "Qu'est-ce que l'hameçonnage ?",
theme: {
code: "hameconnage",
libelle: "Hameçonnage",
},
};
console.log(question.theme.libelle); // Hameçonnage
Le piège : lire une propriété d'une valeur absente
Une donnée venue d'un serveur ou d'un utilisateur peut manquer. Que se passe-t-il si theme n'existe pas ?
const question = { id: 2, enonce: "Qu'est-ce qu'un VPN ?" };
console.log(question.theme.libelle);
TypeError: Cannot read properties of undefined (reading 'libelle')
C'est l'une des erreurs les plus fréquentes en JavaScript : question.theme vaut undefined, et on ne peut pas lire de propriété sur undefined.
Dans une application, ce bug fait planter l'écran.
L'accès sécurisé ?.
L'opérateur ?. (chaînage optionnel) signifie : « lis la propriété si la valeur existe, sinon renvoie undefined et ne plante pas ».
console.log(question.theme?.libelle); // undefined (aucune erreur)
La valeur de remplacement ??
L'opérateur ?? (fusion des nuls) fournit une valeur de remplacement quand la valeur de gauche est null ou undefined.
const libelle = question.theme?.libelle ?? "Thème inconnu";
console.log(libelle); // Thème inconnu
?. et ?? forment un duo très courant : lire en sécurité, puis remplacer si absent.
|| remplace toute valeur falsy, y compris 0 et "". ?? ne remplace que null et undefined.
const score = 0;
console.log(score || 10); // 10 (faux : le score 0 est perdu)
console.log(score ?? 10); // 0 (correct)
Pour une valeur par défaut, préférez presque toujours ??.
Parcourir les clés d'un objet
const joueur = { pseudo: "Alice", score: 12 };
console.log(Object.keys(joueur)); // [ 'pseudo', 'score' ]
console.log(Object.values(joueur)); // [ 'Alice', 12 ]
console.log(Object.entries(joueur)); // [ [ 'pseudo', 'Alice' ], [ 'score', 12 ] ]
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Votre mission : décrire une question du quiz et la lire sans jamais risquer de plantage. Travaillez dans le fichier labo-js/objets.js.
Étape 1 — Décrire la question
Créez la constante question avec les propriétés id (1), enonce ("Quel est le mot de passe le plus robuste ?"), niveau (1) et theme, un objet avec code ("mots-de-passe") et libelle ("Mots de passe").
Terminer chaque propriété par une virgule (même la dernière) facilite les ajouts et les comparaisons de versions : une ligne ajoutée = une ligne modifiée.
Étape 2 — Lire une propriété imbriquée
Affichez le libellé du thème avec le chaînage optionnel.
Utilisez ?. dès qu'une donnée peut manquer (réponse d'un serveur, saisie, fichier). Pour vos propres données, toujours présentes, il est inutile.
Étape 3 — Une valeur de remplacement
Une deuxième question n'a pas de thème ni d'indice. Affichez son thème ou le texte "Thème inconnu" si absent.
L'écran qui affiche « Thème inconnu » est un petit défaut. L'écran qui plante, c'est un gros bug. Écrivez toujours le code qui gère l'absence de la donnée.
📌 Une solution
Ce qu'il faut retenir
| Notion | Résumé |
|---|---|
| Objet | Un ensemble de paires cle: valeur entre accolades, lu avec objet.cle. |
const et objets | const interdit de remplacer la variable, mais pas de modifier les propriétés. |
| Objets imbriqués | Une propriété peut contenir un objet : question.theme.libelle. |
?. | Lit une propriété seulement si la valeur existe, sinon renvoie undefined sans erreur. |
?? | Valeur de remplacement uniquement pour null et undefined (contrairement à ||). |
Aperçu de la prochaine séance
Une question contient plusieurs réponses. Dans la prochaine séance, vous découvrirez les tableaux : comment les créer, les lire, les parcourir, y chercher un élément, et comment ne pas se faire piéger par un élément introuvable.