Understanding [object Object] in JavaScript: Causes and Solutions

Problem Background and Phenomenon Analysis

In JavaScript development, developers often encounter the [object Object] output in alert dialogs. This phenomenon typically occurs when attempting to directly output object instances, especially when working with DOM element objects returned by libraries like jQuery.

Default Object Conversion Mechanism

All objects in JavaScript inherit from Object.prototype. When an object needs to be converted to a string, its toString() method is invoked. For regular Object objects, the default toString() method returns the "[object Object]" string.

function stringify(x) {
    console.log(Object.prototype.toString.call(x));
}

// String representations of different object types
stringify(function(){}); // [object Function]
stringify([]);           // [object Array]
stringify(/x/);          // [object RegExp]
stringify(new Date());   // [object Date]
stringify({});           // [object Object]

Practical Case Analysis

In the original problem code, the whichIsVisible() function returns jQuery objects:

function whichIsVisible() {
    if (!$1.is(':hidden')) return $1;
    if (!$2.is(':hidden')) return $2;
}

$('#senddvd').click(function() {
    alert(whichIsVisible()); // Displays [object Object]
});

Since whichIsVisible() returns jQuery objects, and the alert() method converts them to strings, the output appears as [object Object].

Solutions

Method 1: Access Specific Properties

If you need to retrieve the ID of the visible element, you can directly access the object's properties:

alert(whichIsVisible()[0].id);

Method 2: Use Debugging Tools

Modern browsers provide better debugging tools. It's recommended to use console.log() instead of alert():

console.log(whichIsVisible());

This allows complete inspection of the object's structure and properties, facilitating debugging.

Method 3: JSON Serialization

If you need to display the complete content of an object as a string, you can use JSON.stringify():

const student = {
    name: "John",
    school: "freeCodeCamp"
};
alert(JSON.stringify(student));

Best Practice Recommendations

During development, the following points should be considered:

• Avoid using pure numbers as HTML element IDs, as this may cause selector issues
• Prefer console.log() over alert() for debugging purposes
• Understand the differences in string representations among different object types
• Choose appropriate object serialization methods based on actual requirements

Conclusion

[object Object] is the standard string representation of JavaScript objects. Understanding its generation mechanism helps in better debugging and development. By properly using debugging tools and serialization methods, object display issues can be effectively resolved, improving development efficiency.