1. Introduction
When building programs in JavaScript, you may sometimes see the string “[object Object]” when trying to display an object. This is a common situation that happens when JavaScript objects are output directly without formatting.
In this article, we’ll explain what “[object Object]” actually means and how to properly display the contents of an object in a readable way.
This guide is designed for beginners to intermediate developers, and it includes practical examples and code snippets to help you understand the topic more deeply.
2. What Is ‘[object Object]’?
In JavaScript, when you try to convert an object into a string, the default behavior often results in “[object Object]”. This output represents type information about the value, but it does not show the actual contents of the object.
Why Does ‘[object Object]’ Appear?
JavaScript objects have a default toString() method. This method is called whenever an object is treated as a string. However, according to the JavaScript standard specification, objects return the following format by default when converted to a string.
console.log({}); // Output: [object Object]This behavior only shows the type information as “object” and does not include any details about keys or values inside the object. That’s why developers need to use other methods to inspect and display object data properly.
3. Why ‘[object Object]’ Appears
The Role of the toString() Method
All JavaScript objects inherit the Object.prototype.toString() method. This method is automatically called when an object is converted to a string.
To confirm the default behavior, take a look at the following code:
const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]As you can see, toString() is designed to return “[object Object]” for plain objects by default.
Examples Caused by Implicit Type Coercion
The same behavior occurs when an object is concatenated with a string.
const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]In this example, obj is converted to a string, and toString() is called internally—resulting in the output “[object Object]”.
4. How to Avoid ‘[object Object]’
4.1. Convert Objects to Strings with JSON.stringify()
The easiest and most common approach is to use JSON.stringify() to convert an object into a JSON-formatted string.
Example: Basic JSON.stringify Usage
const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}In this code, the object’s keys and values are displayed accurately in JSON format.
Pretty Printing (With Indentation)
You can also output formatted JSON with indentation to improve readability.
console.log(JSON.stringify(obj, null, 2));Output:
{
"key": "value",
"id": 123
}Because JSON.stringify() can format complex objects and nested structures cleanly, it’s extremely useful for debugging.
4.2. Inspect Objects in Detail with console.dir()
Using console.dir(), you can inspect an object’s properties and methods in a hierarchical structure.
Example: How to Use console.dir
const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);This output is displayed in a format that lets you expand and inspect the object structure within DevTools.
Difference Between console.dir and console.log:
console.log(obj)shows the object in a single-line style, which is not ideal for inspecting complex structures.console.dir(obj)preserves the hierarchical structure, making it useful for nested objects and arrays.
4.3. Implement a Custom toString() Method
You can customize the default “[object Object]” output by defining your own toString() method on an object.
Example: Custom toString Implementation
const obj = {
key: "value",
id: 123,
toString() {
return `Key: ${this.key}, ID: ${this.id}`;
},
};
console.log(obj.toString()); // Output: Key: value, ID: 123With this approach, when the object is treated as a string, it will output your custom format instead of the default value.
4.4. Print Object Contents with a for…in Loop
Another option is to loop through an object’s keys and values and print them manually.
Example: Using a for…in Loop
const obj = { key: "value", id: 123 };
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}Output:
key: value
id: 123This approach is simple and easy to customize, making it suitable for quickly inspecting small objects.
4.5. Use Object.entries() or Object.keys()
From ES6 onward, JavaScript provides methods to extract keys and values as arrays.
Example: Using Object.entries
const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));Output:
[ [ 'key', 'value' ], [ 'id', 123 ] ]By getting key-value pairs as arrays, you can leverage array methods for further processing.
5. Advanced Examples: Displaying Complex Objects and Arrays
5.1. Displaying Nested Objects
When an object contains other objects, let’s look at an easy way to display the contents clearly.
Example: Displaying a Nested Object
const data = {
user: {
name: "John",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
},
hobbies: ["reading", "traveling"],
};
console.log(JSON.stringify(data, null, 2));Output:
{
"user": {
"name": "John",
"age": 30,
"address": {
"city": "Tokyo",
"country": "Japan"
}
},
"hobbies": [
"reading",
"traveling"
]
}As shown above, using JSON.stringify() makes the structure of nested objects easy to understand.
5.2. Displaying Objects That Contain Arrays
If an object contains an array, you can handle it in a similar way.
Example: Displaying an Object with an Array
const order = {
id: 101,
items: [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 100 },
{ name: "Cherry", price: 200 },
],
total: 450,
};
console.table(order.items);Output:
| (index) | name | price |
|---|---|---|
| 0 | Apple | 150 |
| 1 | Banana | 100 |
| 2 | Cherry | 200 |
In this example, console.table() displays array items in a table format. This makes it easier to visually inspect the data structure and improves debugging efficiency.
5.3. Handling Objects with Circular References
In JavaScript, if an object contains a circular reference, directly using JSON.stringify() will throw an error.
Example: Circular Reference Error
const objA = {};
const objB = { a: objA };
objA.b = objB;
console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSONIn this case, you can solve the issue by using a third-party library or implementing a custom function to handle circular references.
Solution Example: Using the flatted Library
const { stringify } = require("flatted");
console.log(stringify(objA));This approach allows you to safely stringify objects that contain circular references.
5.4. Getting Only Keys from Objects or Arrays
When exploring a data structure, it can also be useful to extract and display only the keys or values.
Get a List of Keys:
const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]Get a List of Values:
console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]Get Key-Value Pairs:
console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]These methods are helpful for analyzing data and extracting specific information efficiently.
6. Common Errors and Fixes
6.1. Circular Reference Error: “Converting circular structure to JSON”
Error Message:
TypeError: Converting circular structure to JSONCause:
This happens when an object property references the same object again, creating a circular structure.
Example:
const objA = {};
const objB = { parent: objA };
objA.child = objB;
console.log(JSON.stringify(objA)); // Error occursSolution 1: Use a Custom Serialization Function
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: Use a Third-Party Library
If you use a library designed for circular references, such as flatted, you can avoid this error more easily.
const { stringify } = require("flatted");
console.log(stringify(objA));This approach lets you safely handle complex circular structures with the help of a library.
6.2. Errors When Handling undefined or null
Error Example:
const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefinedCause:
Trying to access a property on undefined or null results in an error.
Solution: Use Optional Chaining
const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)Optional chaining (?.) allows safe access even when the object does not exist.
6.3. Undefined Property Error
Error Example:
const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefinedCause:
This occurs when you try to access a property that does not exist.
Solution 1: Set a Default Value
console.log((obj.value || "default").toString()); // Output: defaultSolution 2: Combine Optional Chaining and Nullish Coalescing
console.log(obj.value?.toString() ?? "default"); // Output: defaultThis makes property access safer and prevents runtime errors.
6.4. Mistakes When Using Object.assign()
Error Example:
const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to objectCause:Object.assign() requires an object as the first argument, so passing null or undefined causes an error.
Solution:
Pass an empty object as the initial value.
const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }6.5. JSON.parse Error: “Unexpected token”
Error Example:
const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSONCause:
JSON has strict syntax rules. Using single quotes or omitting quotes around keys makes it invalid JSON.
Solution:
Fix the string into valid JSON format.
const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }7. Summary
In this article, we covered the common “[object Object]” display issue in JavaScript, including why it happens and how to fix it with practical solutions. Let’s review the key points and organize what we learned.
7.1. What ‘[object Object]’ Really Means
- JavaScript objects are converted to strings by default using the
toString()method. - As a result, plain objects are displayed in the format “[object Object]”.
7.2. How to Display Object Contents Properly
We introduced several practical approaches to inspect and display object data more clearly.
JSON.stringify()for converting objects into readable strings:
- Displays objects in JSON format and supports pretty printing (formatted output).
console.dir()for hierarchical object inspection:
- Lets you visually explore detailed object structures in DevTools.
- Implementing a custom
toString()method:
- Allows you to define your own display format for objects.
- Using loops and
Object.entries():
- Extracts keys and values to print them manually.
7.3. Advanced Use Cases and Handling Complex Objects
- Nested objects and arrays:
JSON.stringify()andconsole.table()help display data in a clean and readable format. - How to deal with circular reference errors:
- Use custom functions or third-party libraries to avoid failures.
- Efficient data extraction:
- Use
Object.keys(),Object.values(), andObject.entries()to retrieve information efficiently.
7.4. Error Prevention and Debugging Tips
We also explained common errors related to object operations and how to fix them.
- Circular reference errors:
- Handle them with custom serializers or libraries.
- Errors when accessing undefined or null:
- Use optional chaining and set default values.
- JSON.parse errors:
- Make sure the string is valid JSON format.
By applying these techniques, you can prevent errors in advance and make debugging much smoother.
7.5. Final Thoughts
JavaScript objects are a powerful tool for managing data flexibly. However, without understanding how objects behave, you may run into display issues like “[object Object]” or unexpected runtime errors.
Use the techniques and error-handling strategies introduced in this article to write cleaner, safer, and more efficient code.
Next Steps:
- To deepen your understanding of object handling, check related articles and official documentation.
- Write and run real code to confirm behavior and strengthen your skills.
That concludes our explanation of the JavaScript object display issue. Thanks for reading!
