Effectively Overriding JavaScript’s toString() Method

Getting Rid Of [object Object]

Image for post
Image for post

This article is inspired by the article written by Mayank Gupta. I would highly recommend you read it. It can be found here.

In his article he explains why we often get [object Object] when using an alert(Object) or console.log(Object) statement.

The reason for [object Object] can be found on the MDN as well as the article by Mayank Gupta, and Symbol.toStringTag.

What I would like to do is override the toString() method in our Objects in a way that will allow us to actually see the contents of the Object as a string.


We will look at two solutions. The second of which I prefer (caveat.)

  1. Overriding the toString() method directly in your Object. (see Solution 1)
  2. Overriding Object. prototype.toString with your own function. (see Solution 2)

Quick Reproduction Of The Problem

This is a an example that invokes the toString() method built in to every Object. This is done in server-side node.js but could also be done using a client-side “alert().” Note the output.

Image for post
Image for post

In my opinion this is disappointing and not very informative. Personally, I’d at least like to see the contents of the Object, e.g., the Keys and the Values.

Solution 1:

Overriding the toString() method directly in your object (method 1)

Keeping with our simple Object, let’s create our own toString() method that shows the keys and the values of our Object when invoked. Our toString() method is overriding the built in toString().

Image for post
Image for post

No [object Object]!

We now have the Keys and Values.


Note: If desired, this could be written as below in the next image. However, it is very important to use an Anonymous Function “function(){}” and not an Arrow Function “()=>{}” in this case.

Why? Because an Arrow function’s “this” keyword does not refer to “this Object.” Arrow Functions have a Lexical this.

Overriding the toString() method directly in your object (method 2)

Image for post
Image for post

No [object Object]!

We now have the Keys and Values.


Solution 2

Overriding Object. prototype.toString with your own function.


Caveat: be careful when overriding a native object’s properties. You never know when a fundamental change will be made to the object.


Again, if you plan to use the “this” keyword, do not use an Arrow Function.

Image for post
Image for post

No [object Object]!

We now have the Keys and Values.

Conclusion:

Here we have seen the importance of overriding the built-in toString() method and a couple of ways to do it.

This is just a starting point, however, you can make the custom toString() method return whatever you like, it does not have to use JSON.stringify().

As a side benefit, we learned a bit about the difference between Anonymous Functions and Arrow Functions, specifically how they handle the keyword “this.”

Thank you for reading and Happy Coding!

JavaScript In Plain English

New articles every day.

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store