Créez, lisez, parcourez et copiez des objets JavaScript, et découvrez pourquoi votre page affiche [object Object] et comment montrer la vraie valeur. Collez n'importe quel JSON pour l'inspecter en direct.
Un objet JavaScript est un ensemble de valeurs nommées écrit sous la forme { key: value }. Vous lisez une valeur avec obj.key ou obj['key'], listez les clés avec Object.keys et les paires avec Object.entries. Le texte [object Object] apparaît quand un objet est converti en chaîne : utilisez JSON.stringify(obj) pour afficher son contenu.
Les objets sont la forme sous laquelle arrivent presque toutes les réponses d'API, fichiers de configuration et props React. Ce guide couvre les quelques opérations que vous utilisez chaque jour, puis traite les deux surprises classiques : [object Object] qui s'affiche dans la page ou dans une alerte, et une copie qui partage en secret ses données imbriquées avec l'original.
Collez ou modifiez du JSON dans l'inspecteur. Il est analysé dans votre navigateur avec JSON.parse.
Chaque ligne montre une manière courante de transformer l'objet en texte ou en liste, y compris celle qui produit [object Object].
Utilisez l'expérience de copie pour modifier une valeur imbriquée sur une copie par spread et sur une copie structuredClone, et voyez laquelle se répercute sur l'original.
Les exemples de code ci-dessous sont prêts à coller dans votre éditeur ou dans la console du navigateur.
Pour voir un objet dans la console, affichez-le seul avec console.log(obj) ou console.table(obj). Le concaténer à une chaîne avec + l'aplatit en [object Object].
Object.keys renvoie les clés sous forme de chaînes, même celles qui ressemblent à des nombres, et les clés de type entier sortent par ordre croissant avant les autres.
JSON.stringify ignore les propriétés dont la valeur est undefined, une fonction ou un symbole, et lève une TypeError sur les références circulaires.
Utilisez Object.hasOwn(obj, key) pour tester si l'objet lui-même possède une clé, l'opérateur in regarde aussi les propriétés héritées.
Questions fréquentes
Pourquoi mon code affiche-t-il [object Object] ?
Quelque chose a converti l'objet en chaîne : un + avec du texte, un template literal, une alert, element.textContent ou innerText. La méthode toString par défaut des objets simples renvoie le texte fixe [object Object]. Affichez plutôt JSON.stringify(obj), ou choisissez la propriété voulue, comme obj.name.
Comment parcourir un objet en JavaScript ?
Utilisez for (const [key, value] of Object.entries(obj)) { ... }. Un objet simple n'est pas itérable, donc for...of directement dessus lève une TypeError. for...in fonctionne aussi mais inclut les clés énumérables héritées.
Comment copier un objet sans le lier à l'original ?
Pour un objet plat, { ...obj } ou Object.assign({}, obj) suffit. Si l'objet contient des objets ou des tableaux imbriqués, utilisez structuredClone(obj), qui copie tous les niveaux. Il gère les Dates, Maps et Sets mais lève une DataCloneError sur les fonctions et les nœuds DOM.
Comment transformer un objet en tableau et inversement ?
Object.entries(obj) donne un tableau de paires [key, value]. Transformez-le avec map ou filter, puis reconstruisez un objet avec Object.fromEntries(pairs). C'est la méthode habituelle pour appliquer map aux valeurs d'un objet.
Quelle est la différence entre un objet et une Map ?
Une Map accepte n'importe quel type comme clé, retient l'ordre d'insertion de toutes les clés et possède une propriété size. Les objets simples utilisent des clés chaînes ou symboles et sont ce que produit JSON. Notez que JSON.stringify transforme une Map en {}, donc convertissez-la d'abord avec Object.fromEntries(map).
Notation pointée ou crochets
La notation pointée est plus courte et fonctionne quand la clé est un identifiant valide que vous connaissez en écrivant le code. Les crochets sont obligatoires quand la clé est dans une variable, contient un espace ou un tiret, ou commence par un chiffre, par exemple headers['content-type'].
Lire une clé qui n'existe pas renvoie undefined plutôt qu'une erreur. C'est la lecture d'une propriété de cet undefined qui lève une erreur, d'où l'intérêt du chaînage optionnel (user.address?.city) sur les données d'API.
Copies superficielles et profondes
Le spread ne copie que le premier niveau. Le nouvel objet a ses propres emplacements, mais si un emplacement contient un autre objet, les deux copies pointent vers ce même objet interne, donc modifier copy.address.city modifie aussi l'original.
structuredClone parcourt toute la structure et crée aussi de nouveaux objets internes. Il ne conserve ni les prototypes de classe, ni les getters, ni les setters, donc une instance de classe revient sous forme d'objet simple avec les mêmes données.
Afficher la vraie valeur au lieu de [object Object]
Quatre façons d'afficher un objet
Seule la première ligne produit [object Object]. Les autres affichent un contenu lisible.
Affichage formaté dans la page
Un élément pre conserve les sauts de ligne et l'indentation que JSON.stringify ajoute avec son troisième argument.
Transformer des objets avec entries et fromEntries
Ajouter la taxe à chaque prix
entries transforme l'objet en paires, map modifie chaque valeur, fromEntries construit un nouvel objet.
Spread ou structuredClone
La copie par spread partage l'objet address interne, le clone non.
Inspecteur d'objet
Modifiez le JSON et voyez comment chaque approche le transforme en texte ou en liste.
Votre objet en JSON
JSON invalide : {v}
C'est du JSON valide mais pas un objet. Entourez-le d'accolades.
Façons d'afficher l'objet
Code
Résultat
Expérience de copie
Changez la ville sur une copie, puis vérifiez si l'original a changé aussi.