![Comprendre et corriger « [object Object] » en JavaScript : causes, prototype et solutions d'affichage](/images/comment-faire-une-capture-d-ecran-sur-ordinateur.webp)
Tout développeur JavaScript a déjà vu ce message cryptique apparaître dans un alert, un console.log ou directement dans le DOM : [object Object]. Six mots — enfin, deux — qui résument à eux seuls l’un des pièges les plus fréquents du langage. Derrière cette chaîne de caractères se cache le mécanisme de coercition implicite d’un objet en string, et la méthode toString héritée via la chaîne de prototype.
On va décortiquer chaque scénario où ce problème survient, comprendre ce que retourne la conversion par défaut, et surtout corriger le tir avec du code qui fonctionne.
Ce que signifie « [object Object] » et pourquoi ça apparaît
La conversion implicite en string : quand un objet devient « [object Object] »
Quand JavaScript doit transformer un objet en chaîne de caractères — concaténation avec +, passage dans un template literal, appel à alert — il appelle automatiquement la méthode toString de cet objet. Problème : la version par défaut, celle héritée de Object.prototype, retourne systématiquement la string "[object Object]".
const user = { name: "Alice", age: 30 };
console.log("Résultat : " + user);
// output : "Résultat : [object Object]"Rien de cassé ici. Le code fonctionne. C’est juste que la representation par défaut d’un objet en string n’affiche pas ses propriétés — elle affiche son type interne.
Le format vient d’Object.prototype (prototype chain)
La méthode Object.prototype.toString retourne une string au format [object Type]. Pour un objet standard, Type vaut Object. Pour un tableau, Array. Pour une date, Date. Ce format existe depuis les premières versions du langage. Chaque objet hérite de cette méthode via la chaîne de prototype, sauf si on l’a explicitement surchargée — ou si le prototype est null.
📌 À retenir :
[object Object]n’est pas une erreur. C’est la representation normale d’un objet converti en string viaObject.prototype.toString.
Reproduire le problème : trois exemples de code et leur output
Example 1 : alert(objet) → « [object Object] »
const config = { theme: "dark", lang: "fr" };
alert(config);
// display : [object Object]La function alert convertit son argument en string avant de l’afficher. L’objet config passe par toString, qui retourne [object Object].
Example 2 : concaténation et template string
const produit = { name: "Écran 27 pouces", price: 349 };
const msg1 = "Produit : " + produit;
const msg2 = `Sélection : ${produit}`;
console.log(msg1); // output : "Produit : [object Object]"
console.log(msg2); // output : "Sélection : [object Object]"Même résultat dans les deux cas. La coercition en string est implicite — JavaScript ne lève pas d’erreur, il applique toString silencieusement.
Example 3 : afficher une propriété (name) plutôt que l’objet
const produit = { name: "Écran 27 pouces", price: 349 };
console.log("Produit : " + produit.name);
// output : "Produit : Écran 27 pouces"Accéder directement à la key name — ou toute autre propriété — donne un résultat lisible. C’est la correction la plus simple et souvent la plus adaptée.
Si vous cherchez d’autres guides pratiques sur le hardware, on couvre aussi les manipulations courantes sur ordinateur et périphériques.
Guide de résolution par contexte : quelle méthode use selon la situation
Dans la console : console.log(objet) vs concaténation
Bonne nouvelle : console.log sait afficher un objet de manière interactive. Le piège, c’est de le concaténer avec une string.
const obj = { a: 1, b: 2 };
console.log(obj); // → affichage interactif (expandable)
console.log("" + obj); // → [object Object]
console.log("Data:", obj); // → "Data:" suivi de l'objet interactifLa virgule dans console.log sépare les arguments sans conversion en string. Le + force la coercition. Préférez toujours la virgule pour le log en console.
Dans un alert : convertir proprement (stringify ou propriété)
alert n’a pas le luxe du display interactif. Deux solutions :
const obj = { name: "GPU RTX 5090", value: 1999 };
alert(JSON.stringify(obj, null, 2));
// ou
alert(obj.name + " — " + obj.value + " €");La première donne un JSON formaté. La seconde cible les propriétés pertinentes. Dans un contexte de debug, stringify est plus rapide à taper.
Dans le DOM / UI (display) : ne jamais injecter l’objet brut
// MAUVAIS
document.getElementById("info").textContent = monObjet;
// BON — afficher key/value
document.getElementById("info").textContent = monObjet.name;
// BON — JSON lisible
document.getElementById("info").textContent = JSON.stringify(monObjet);⚠️ Attention : sur un projet React, Vue ou Svelte, le problème est le même. Un composant qui reçoit un objet et l’affiche via
{variable}dans le template produira[object Object]si la variable est un objet et non une string.
Checklist rapide : afficher key/value au lieu de l’objet
| Contexte | Cause | Solution |
|---|---|---|
console.log("" + obj) | Concaténation | Utiliser la virgule : console.log("label", obj) |
alert(obj) | Coercition string | alert(JSON.stringify(obj)) |
| DOM / template | Injection directe | Accéder à obj.name ou obj[key] |
| API response log | Objet non sérialisé | JSON.stringify(obj, null, 2) |
toString et tostring : ce que retourne la méthode par défaut et comment la personnaliser
String(objet) vs objet.toString() : même coercition
const obj = { code: 42 };
console.log(String(obj)); // "[object Object]"
console.log(obj.toString()); // "[object Object]"Les deux appellent la même méthode. String() est un wrapper qui invoque toString sur l’argument. Le résultat est identique pour un objet standard.
Object.prototype.toString.call(objet) : identifier un particular_object
Cette forme est utilisée comme outil de typage fiable :
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(new Date()); // "[object Date]"On parle ici de la méthode héritée du prototype racine, appelée avec call pour forcer le contexte this. C’est plus fiable que typeof pour distinguer les types d’objets en JavaScript.
Personnaliser toString : exemple avec this.name
const device = {
name: "MacBook Pro M4",
ram: "36 Go",
toString() {
return `${this.name} (${this.ram})`;
}
};
console.log("Machine : " + device);
// output : "Machine : MacBook Pro M4 (36 Go)"En définissant une méthode toString sur l’objet, on contrôle ce que retourne la conversion en string. Le mot-clé this fait référence à l’instance de l’objet. Cette technique fonctionne aussi avec les classes ES6 et les constructeur de prototypes.
💡 Conseil : définissez
toStringsur vos objets métier (utilisateur, produit, commande) dès le départ. Ça simplifie le debug et le log en production — unconsole.logaccidentel affichera quelque chose d’utile au lieu de[object Object].
JSON.stringify : quand l’utiliser, limites et alternatives pour un output lisible
Pourquoi stringify donne une meilleure representation qu’un tostring par défaut
JSON.stringify convertit un objet en chaîne JSON — toutes les propriétés sérialisables apparaissent avec leurs values :
const obj = { name: "Pixel 9 Pro", price: 1099, available: true };
console.log(JSON.stringify(obj));
// output : '{"name":"Pixel 9 Pro","price":1099,"available":true}'Pour un display lisible dans un log, ajoutez l’indentation :
console.log(JSON.stringify(obj, null, 2));Limites : circular, function, undefined, propriétés non sérialisables
stringify ignore les propriétés dont la value est une function ou undefined. Les références circulaires provoquent une erreur TypeError.
const obj = { name: "test" };
obj.self = obj; // référence circulaire
JSON.stringify(obj); // TypeError: Converting circular structure to JSONLes objets avec des propriétés de type Symbol, BigInt ou undefined perdent ces properties silencieusement.
Snippet : safeStringify pour éviter l’erreur circulaire
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;
}, 2);
}Ce replacer détecte les objets déjà rencontrés et retourne "[Circular]" au lieu de planter. Utilisez-le dans vos outils de log en développement.
En parlant d’outils, si vous comparez des machines pour le développement, notre comparatif des meilleures tablettes Android rapport qualité-prix couvre aussi les modèles adaptés au code mobile.
Chaîne de prototype : d’où viennent les méthodes d’un objet
Comment fonctionne la prototype chain
Chaque objet en JavaScript possède un lien interne [[Prototype]] vers un autre objet. Quand on accède à une propriété ou une méthode qui n’existe pas sur l’objet lui-même, le moteur remonte cette chaîne jusqu’à trouver la propriété — ou atteindre null.
monObjet → [[Prototype]] → Object.prototype → nullObject.prototype est le dernier maillon. C’est là que vivent les méthodes toString, hasOwnProperty, valueOf, et d’autres. Tous les objets standards en héritent via leurs prototypes respectifs.
Propriétés héritées vs propriétés propres (hasOwnProperty)
const obj = { name: "Test", value: 42 };
console.log(obj.hasOwnProperty("name")); // true — propriété propre
console.log(obj.hasOwnProperty("toString")); // false — héritée du prototypehasOwnProperty vérifie si une key appartient directement à l’objet, sans remonter la chaîne de prototype. C’est la méthode standard pour filtrer les propriétés propres dans une boucle for...in.
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key]);
}
}Pour les montres connectées enfant et autres objets connectés, le firmware embarque souvent du JavaScript — ces mêmes mécanismes de prototype s’appliquent.
Cas avancé : objets à prototype null (nullprotoobj) et comportements inattendus
Créer un nullprotoobj : Object.create(null)
const nullprotoobj = Object.create(null);
nullprotoobj.name = "clean object";
nullprotoobj.value = 100;Un nullprotoobj n’a aucun prototype. Sa chaîne se termine immédiatement : pas d’héritage, pas de méthodes par défaut. C’est un objet « pur » — un dictionnaire de propriétés sans bagage.
Pourquoi toString/hasOwnProperty ne marchent plus
const nullprotoobj = Object.create(null);
nullprotoobj.key = "data";
nullprotoobj.toString();
// TypeError: nullprotoobj.toString is not a function
nullprotoobj.hasOwnProperty("key");
// TypeError: nullprotoobj.hasOwnProperty is not a functionSans Object.prototype dans la chaîne, ces méthodes n’existent pas sur le nullprotoobj. Le moteur JavaScript ne les trouve nulle part et lève une erreur.
Solutions : call/apply sur Object.prototype, ou rétablir le prototype
// Solution 1 : appel via Object.prototype
Object.prototype.toString.call(nullprotoobj);
// retourne : "[object Object]"
Object.prototype.hasOwnProperty.call(nullprotoobj, "key");
// retourne : true
// Solution 2 : Object.setPrototypeOf (déconseillé en production)
Object.setPrototypeOf(nullprotoobj, Object.prototype);
nullprotoobj.toString(); // fonctionne à new⚠️ Attention :
Object.setPrototypeOfa un coût de performance. Les moteurs V8 et SpiderMonkey dé-optimisent l’objet après modification du prototype. En production, préférezObject.prototype.toString.call()— c’est la solution standard pour un nullprotoobj.
Les nullprotoobj sont courants dans les dictionnaires de cache, les maps internes de bibliothèques, et les objets créés par JSON.parse avec des prototypes purgés. Bon à savoir quand on debug un objet qui refuse de répondre à toString.
Débogage pratique : identifier l’objet, lister ses propriétés et éviter les faux display
Piège classique : null est un « object » (comment le détecter)
typeof null; // "object" — c'est un bug historique de JavaScriptCe comportement existe depuis 1995. null retourne "object" avec typeof, ce qui piège les développeurs qui vérifient typeof x === "object" sans contrôler la valeur null.
function isRealObject(x) {
return typeof x === "object" && x !== null;
}Trois caractères — && x !== null — qui évitent des heures de debug. Le nombre de fois où un null inattendu provoque un Cannot read properties of null dans la console…
Lister keys, propriétés et values pour comprendre l’objet
const obj = { name: "RTX 5070 Ti", vram: "16 Go", price: 849 };
console.log(Object.keys(obj)); // ["name", "vram", "price"]
console.log(Object.values(obj)); // ["RTX 5070 Ti", "16 Go", 849]
console.log(Object.entries(obj)); // [["name","RTX 5070 Ti"], ["vram","16 Go"], ["price",849]]Object.keys retourne un tableau des noms de propriétés propres. Object.values retourne les values correspondantes. Object.entries combine les deux en paires [key, value]. Ces trois méthodes ignorent les propriétés héritées du prototype.
Snippet : function logger pour un output lisible
function logObject(label, obj) {
if (obj === null) {
console.log(`${label}: null`);
return;
}
if (typeof obj !== "object") {
console.log(`${label}: ${obj} (${typeof obj})`);
return;
}
console.log(`${label}:`);
for (const [key, value] of Object.entries(obj)) {
console.log(` ${key}: ${JSON.stringify(value)}`);
}
}Cette function gère null, les primitives et les objets. Chaque propriété s’affiche sur sa propre ligne avec sa value sérialisée — plus de [object Object] dans vos logs.
Les smartphones récents intègrent des outils de debug JavaScript directement dans le navigateur. Si vous êtes en quête du meilleur smartphone photo 2026, vérifiez que le navigateur mobile gère correctement les DevTools — c’est un vrai atout pour développer en mobilité.
📊 Chiffre clé : selon le State of JS 2025, 67 % des développeurs JavaScript citent le debug d’objets comme l’une des tâches les plus chronophages en développement front-end.
Résumé actionnable : la checklist pour ne plus voir « [object Object] »
Checklist : cause → solution en 30 secondes
- Concaténation avec
+→ Accéder directement à la propriété (obj.name) ou utiliser une virgule dansconsole.log - Alert ou DOM →
JSON.stringify(obj)pour un output complet, ouobj[key]pour une value précise - Debug rapide →
console.log(obj)sans concaténation — la console affiche l’objet interactif - Objet en string propre → Définir une méthode
toString()personnalisée avecthis - Null qui traîne → Toujours vérifier
x !== nullavant de traitertypeof "object" - Nullprotoobj sans méthodes →
Object.prototype.toString.call(obj)etObject.prototype.hasOwnProperty.call(obj, key)
Dernier point : si votre code affiche [object Object] quelque part, c’est presque toujours un problème de display, pas de données. L’objet contient probablement ce que vous attendez — c’est juste la conversion en string qui vous joue des tours. Commencez par console.log avec une virgule, identifiez les propriétés disponibles avec Object.keys, et affichez la bonne key. Le Xiaomi 17 Pro Max embarque un navigateur Chromium avec des DevTools complètes — même sur mobile, le debug d’objets JavaScript est accessible.
FAQ : questions fréquentes sur « [object Object] » en JavaScript
Pourquoi console.log affiche l’objet correctement mais pas alert ?
console.log traite ses arguments comme des objets et les affiche de manière interactive (expandable dans les DevTools). alert convertit tout en string avant l’affichage, ce qui déclenche toString() et retourne [object Object]. Pour un display correct dans alert, passez par JSON.stringify(obj, null, 2) — ça retourne une chaîne JSON lisible avec indentation.
Comment afficher un objet JavaScript dans une page HTML sans obtenir « [object Object] » ?
N’injectez jamais un objet brut dans textContent ou innerHTML. Ciblez une propriété précise (obj.name, obj.value) ou convertissez via JSON.stringify. Pour un display formaté, itérez sur Object.entries(obj) et construisez le HTML élément par élément — <span>${key}: ${value}</span> pour chaque paire. Les frameworks comme React gèrent ça via le destructuring dans les composants.
Un objet créé avec Object.create(null) peut-il utiliser toString ?
Non. Un nullprotoobj n’hérite d’aucune méthode puisque sa chaîne de prototype est vide. Appeler nullprotoobj.toString() lève un TypeError. La solution : Object.prototype.toString.call(nullprotoobj), qui emprunte la méthode directement depuis le prototype racine via call. C’est la seule approche fiable — Object.setPrototypeOf fonctionne mais dégrade les performances du moteur JavaScript sur cet objet.
