1. Introduction
Lorsque vous créez des programmes en JavaScript, il vous arrive parfois de voir la chaîne « [object Object] » en essayant d’afficher un objet. C’est une situation courante qui se produit lorsque les objets JavaScript sont affichés directement sans mise en forme.
Dans cet article, nous expliquerons ce que signifie réellement « [object Object] » et comment afficher correctement le contenu d’un objet de manière lisible.
Ce guide est destiné aux développeurs débutants à intermédiaires, et il comprend des exemples pratiques ainsi que des extraits de code pour vous aider à approfondir le sujet.
2. What Is ‘[object Object]’?
En JavaScript, lorsque vous essayez de convertir un objet en chaîne, le comportement par défaut aboutit souvent à « [object Object] ». Cette sortie représente des informations de type sur la valeur, mais elle ne montre pas le contenu réel de l’objet.
Why Does ‘[object Object]’ Appear?
Les objets JavaScript possèdent une méthode toString() par défaut. Cette méthode est appelée chaque fois qu’un objet est traité comme une chaîne. Cependant, selon la spécification standard de JavaScript, les objets renvoient le format suivant par défaut lorsqu’ils sont convertis en chaîne.
console.log({}); // Output: [object Object]
Ce comportement n’affiche que l’information de type « object » et n’inclut aucun détail sur les clés ou les valeurs à l’intérieur de l’objet. C’est pourquoi les développeurs doivent utiliser d’autres méthodes pour inspecter et afficher correctement les données d’un objet.
3. Why ‘[object Object]’ Appears
The Role of the toString() Method
Tous les objets JavaScript héritent de la méthode Object.prototype.toString(). Cette méthode est appelée automatiquement lorsqu’un objet est converti en chaîne.
Pour confirmer le comportement par défaut, jetez un œil au code suivant :
const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]
Comme vous pouvez le voir, toString() est conçu pour renvoyer « [object Object] » pour les objets simples par défaut.
Examples Caused by Implicit Type Coercion
Le même comportement se produit lorsqu’un objet est concaténé avec une chaîne.
const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]
Dans cet exemple, obj est converti en chaîne, et toString() est appelé en interne — produisant la sortie « [object Object] ». 
4. How to Avoid ‘[object Object]’
4.1. Convert Objects to Strings with JSON.stringify()
L’approche la plus simple et la plus courante consiste à utiliser JSON.stringify() pour convertir un objet en une chaîne au format JSON.
Exemple : Utilisation basique de JSON.stringify
const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}
Dans ce code, les clés et les valeurs de l’objet sont affichées correctement au format JSON.
Pretty Printing (With Indentation)
Vous pouvez également produire du JSON formaté avec une indentation pour améliorer la lisibilité.
console.log(JSON.stringify(obj, null, 2));
Sortie :
{
"key": "value",
"id": 123
}
Comme JSON.stringify() peut formater proprement les objets complexes et les structures imbriquées, il est extrêmement utile pour le débogage.
4.2. Inspect Objects in Detail with console.dir()
En utilisant console.dir(), vous pouvez inspecter les propriétés et les méthodes d’un objet dans une structure hiérarchique.
Exemple : Comment utiliser console.dir
const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);
Cette sortie est présentée sous un format qui vous permet d’étendre et d’inspecter la structure de l’objet dans les DevTools.
Différence entre console.dir et console.log :
console.log(obj)affiche l’objet sur une seule ligne, ce qui n’est pas idéal pour inspecter des structures complexes.console.dir(obj)préserve la structure hiérarchique, ce qui le rend utile pour les objets et tableaux imbriqués.
4.3. Implement a Custom toString() Method
Vous pouvez personnaliser la sortie par défaut « [object Object] » en définissant votre propre méthode toString() sur un objet.
Exemple : Implémentation d’un toString personnalisé
const obj = {
key: "value",
id: 123,
toString() {
return `Key: ${this.key}, ID: ${this.id}`;
},
};
console.log(obj.toString()); // Output: Key: value, ID: 123
Avec cette approche, lorsque l’objet est traité comme une chaîne, il affichera votre format personnalisé au lieu de la valeur par défaut.
4.4. Afficher le contenu d’un objet avec une boucle for…in
Une autre option consiste à parcourir les clés et les valeurs d’un objet et à les afficher manuellement.
Exemple : utilisation d’une boucle for…in
const obj = { key: "value", id: 123 };
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}
Sortie :
key: value
id: 123
Cette approche est simple et facile à personnaliser, ce qui la rend adaptée à l’inspection rapide de petits objets.
4.5. Utiliser Object.entries() ou Object.keys()
À partir d’ES6, JavaScript fournit des méthodes pour extraire les clés et les valeurs sous forme de tableaux.
Exemple : utilisation de Object.entries
const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));
Sortie :
[ [ 'key', 'value' ], [ 'id', 123 ] ]
En obtenant les paires clé‑valeur sous forme de tableaux, vous pouvez exploiter les méthodes de tableau pour un traitement ultérieur.
5. Exemples avancés : affichage d’objets et de tableaux complexes
5.1. Affichage d’objets imbriqués
Lorsqu’un objet contient d’autres objets, examinons une façon simple d’afficher clairement le contenu.
Exemple : affichage d’un objet imbriqué
const data = {
user: {
name: "John",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
},
hobbies: ["reading", "traveling"],
};
console.log(JSON.stringify(data, null, 2));
Sortie :
{
"user": {
"name": "John",
"age": 30,
"address": {
"city": "Tokyo",
"country": "Japan"
}
},
"hobbies": [
"reading",
"traveling"
]
}
Comme indiqué ci‑dessus, l’utilisation de JSON.stringify() rend la structure des objets imbriqués facile à comprendre.
5.2. Affichage d’objets contenant des tableaux
Si un objet contient un tableau, vous pouvez le gérer de manière similaire.
Exemple : affichage d’un objet avec un tableau
const order = {
id: 101,
items: [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 100 },
{ name: "Cherry", price: 200 },
],
total: 450,
};
console.table(order.items);
Sortie :
| (index) | name | price |
|---|---|---|
| 0 | Apple | 150 |
| 1 | Banana | 100 |
| 2 | Cherry | 200 |
Dans cet exemple, console.table() affiche les éléments du tableau sous forme de tableau. Cela facilite l’inspection visuelle de la structure des données et améliore l’efficacité du débogage.
5.3. Gestion des objets avec des références circulaires
En JavaScript, si un objet contient une référence circulaire, l’utilisation directe de JSON.stringify() déclenchera une erreur.
Exemple : erreur de référence circulaire
const objA = {};
const objB = { a: objA };
objA.b = objB;
console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON
Dans ce cas, vous pouvez résoudre le problème en utilisant une bibliothèque tierce ou en implémentant une fonction personnalisée pour gérer les références circulaires.
Exemple de solution : utilisation de la bibliothèque flatted
const { stringify } = require("flatted");
console.log(stringify(objA));
Cette approche vous permet de sérialiser en toute sécurité les objets contenant des références circulaires.
5.4. Obtenir uniquement les clés d’objets ou de tableaux
Lors de l’exploration d’une structure de données, il peut également être utile d’extraire et d’afficher uniquement les clés ou les valeurs.
Obtenir une liste de clés :
const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]
Obtenir une liste de valeurs :
console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]
Obtenir des paires clé‑valeur :
console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]
Ces méthodes sont utiles pour analyser les données et extraire efficacement des informations spécifiques.
6. Erreurs courantes et solutions
6.1. Erreur de référence circulaire : « Conversion d’une structure circulaire en JSON »
Message d’erreur :
TypeError: Converting circular structure to JSON
Cause :
Cela se produit lorsqu’une propriété d’un objet fait référence à nouveau au même objet, créant ainsi une structure circulaire.
Exemple :
const objA = {};
const objB = { parent: objA };
objA.child = objB;
console.log(JSON.stringify(objA)); // Error occurs
Solution 1 : Utiliser une fonction de sérialisation personnalisée
function safeStringify(obj) {
const seen = new WeakSet();
return JSON.stringify(obj, (key, value) => {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return "[Circular]";
seen.add(value);
}
return value;
});
}
console.log(safeStringify(objA));
// Output: {"child":{"parent":"[Circular]"}}
Solution 2 : Utiliser une bibliothèque tierce
Si vous utilisez une bibliothèque conçue pour les références circulaires, comme flatted, vous pouvez éviter plus facilement cette erreur.
const { stringify } = require("flatted");
console.log(stringify(objA));
Cette approche vous permet de gérer en toute sécurité des structures circulaires complexes grâce à une bibliothèque.
6.2. Erreurs lors de la gestion de undefined ou null
Exemple d’erreur :
const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined
Cause :
Essayer d’accéder à une propriété sur undefined ou null entraîne une erreur.
Solution : Utiliser l’opérateur de chaînage optionnel
const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)
Le chaînage optionnel (?.) permet un accès sûr même lorsque l’objet n’existe pas.
6.3. Erreur de propriété indéfinie
Exemple d’erreur :
const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined
Cause :
Cela se produit lorsque vous essayez d’accéder à une propriété qui n’existe pas.
Solution 1 : Définir une valeur par défaut
console.log((obj.value || "default").toString()); // Output: default
Solution 2 : Combiner le chaînage optionnel et la coalescence nulle
console.log(obj.value?.toString() ?? "default"); // Output: default
Cela rend l’accès aux propriétés plus sûr et empêche les erreurs d’exécution.
6.4. Erreurs lors de l’utilisation de Object.assign()
Exemple d’erreur :
const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object
Cause :
Object.assign() nécessite un objet comme premier argument, donc passer null ou undefined provoque une erreur.
Solution :
Passez un objet vide comme valeur initiale.
const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }
6.5. Erreur JSON.parse : « Unexpected token »
Exemple d’erreur :
const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON
Cause :
JSON possède des règles de syntaxe strictes. Utiliser des guillemets simples ou omettre les guillemets autour des clés rend le JSON invalide.
Solution :
Corrigez la chaîne pour qu’elle soit au format JSON valide.
const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }
7. Résumé
Dans cet article, nous avons abordé le problème d’affichage commun « [object Object] » en JavaScript, y compris les raisons de son apparition et comment le résoudre avec des solutions pratiques. Passons en revue les points clés et organisons ce que nous avons appris.
7.1. Ce que signifie réellement ‘[object Object]’
- Les objets JavaScript sont convertis en chaînes par défaut à l’aide de la méthode
toString(). - En conséquence, les objets simples sont affichés au format « [object Object] » .
7.2. Comment afficher correctement le contenu d’un objet
Nous avons présenté plusieurs approches pratiques pour inspecter et afficher les données d’un objet de manière plus claire.
JSON.stringify()pour convertir les objets en chaînes lisibles :
- Affiche les objets au format JSON et prend en charge l’impression formatée (sortie formatée).
console.dir()pour l’inspection hiérarchique d’objets :
- Vous permet d’explorer visuellement les structures détaillées d’objets dans les DevTools.
- Implémentation d’une méthode
toString()personnalisée :
- Vous permet de définir votre propre format d’affichage pour les objets.
- Utilisation de boucles et de
Object.entries():
- Extrait les clés et les valeurs pour les imprimer manuellement.
7.3. Cas d’utilisation avancés et gestion des objets complexes
- Objets et tableaux imbriqués :
JSON.stringify()etconsole.table()aident à afficher les données de manière claire et lisible. - Comment gérer les erreurs de références circulaires :
- Utilisez des fonctions personnalisées ou des bibliothèques tierces pour éviter les échecs.
- Extraction efficace de données :
- Utilisez
Object.keys(),Object.values()etObject.entries()pour récupérer les informations de manière efficace.
7.4. Prévention des erreurs et astuces de débogage
Nous avons également expliqué les erreurs courantes liées aux opérations sur les objets et comment les corriger.
- Erreurs de références circulaires :
- Gérez-les avec des sérialiseurs personnalisés ou des bibliothèques.
- Erreurs lors de l’accès à undefined ou null :
- Utilisez l’opérateur de chaînage optionnel et définissez des valeurs par défaut.
- Erreurs de JSON.parse :
- Assurez-vous que la chaîne est au format JSON valide.
En appliquant ces techniques, vous pouvez prévenir les erreurs à l’avance et rendre le débogage beaucoup plus fluide.
7.5. Conclusion
Les objets JavaScript sont un outil puissant pour gérer les données de manière flexible. Cependant, sans comprendre le comportement des objets, vous pouvez rencontrer des problèmes d’affichage comme « [object Object] » ou des erreurs d’exécution inattendues.
Utilisez les techniques et les stratégies de gestion des erreurs présentées dans cet article pour écrire du code plus propre, plus sûr et plus efficace.
Prochaines étapes :
- Pour approfondir votre compréhension de la manipulation des objets, consultez les articles associés et la documentation officielle.
- Écrivez et exécutez du code réel pour confirmer le comportement et renforcer vos compétences.
Ceci conclut notre explication du problème d’affichage des objets JavaScript. Merci de votre lecture !
