How to Make JavaScript Objects Return Meaningful Strings

Have you ever seen something like [object Object] when trying to display a JavaScript object? That happens because JavaScript is using the built-in toString() method behind the scenes.

Let’s break down what toString() does, and how you can use it to make your objects return meaningful string values when needed.

What is toString() in JavaScript?

The toString() method is used to convert values into human-readable strings. JavaScript automatically calls it when you try to display an object as a string — for example, in an alert() or when using string concatenation.

// Alerts: [object Object]
alert({});

console.log(function() {}); // Outputs function as a string
console.log(new Date("2020-01-01")); // Outputs date string

Creating Custom String Output

Let’s say we want to create a color object. By default, if you alert the object, you’ll just get [object Object]. But we can change that using toString():

function Color(r, g, b) {
  this.r = r;
  this.g = g;
  this.b = b;
}

Color.prototype.toString = function() {
  return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
};

var red = new Color(255, 0, 0);

alert(red); // Alerts: rgb(255, 0, 0)

Notice how we didn’t call red.toString() directly. JavaScript does that for us when we try to use the object as a string.

Why Use toString()?

• Cleaner code: You don’t need to add extra .text or .label properties.
• Up-to-date values: The string output always matches the current object values.
• Automatic use: Works with alert(), console.log(), string templates, etc.

console.log("Red color is: " + red);
// Output: Red color is: rgb(255, 0, 0)

Conclusion

The toString() method is a simple but powerful way to control how your objects appear when used in strings. It’s especially useful for debugging and creating user-friendly messages. Next time you build a custom object, consider adding a toString() method — it’s a great habit!