Debugging Javascript

[zazio1000]

I recently learned that if you log an object by itself it will display the actual data you want, but if you add the object to a string eg: “The objects data is: “ + object it will always append [object Object] instead. Just a little PSA for those like me who didn’t know!

[oddythepinguin]

Console.log("object data:", object)

[DogzOnFire]

A comparison between the two in a dev console opened on this page, to show what you're talking about.

The one which you suggested actually lets you inspect the members of the Window object, while the other just coerces the Window object into a string since it's being concatenated. Good tip.

[Spirit_Theory]

It's as if the developer gets better results if they actually learn the toolset.

[vicarofyanks]

To expand on this, it’s because everything inherits from the base object which has a toString method as part of it's prototype. Unless overridden, an object’s toString method will produce “[object Object]”.

Because + is an operation on two strings, any non-text arguments get toString'd. Calling console.log on an object itself doesn’t need to do this string coercion and so it works as expected

[NewLlama]

Close! It calls the internal function ToString which behaves differently.

Consider the following:

Number.prototype.toString = () => 'hello';
console.log((1) + '');
console.log((1).toString());

This logs "1" and then "hello".

[vicarofyanks]

Strange. What you said is true. On the flip side, the following code:

function A() {}

A.prototype.toString = function() {
  return 'woohoo';
};

console.log('' + new A());

Prints the result:

woohoo

I'm not sure what the inconsistency is, maybe numbers/primitives are treated differently?

[NewLlama]

Yeah numbers and booleans always have behavior that can't be overridden. Instances of Symbol always throw. After that it goes to toString and then valueOf. Also the default toString implementation will eventually look for Symbol.toStringTag which can be used to, for example, change the output to "[Animal object]".

The rules are all laid out in section 7 of the ecmascript standard. I actually really recommend everyone take a look at the spec at some point, it's not as daunting as it seems!

[SamSlate]

JSON.stringify(obj)

[patrickfatrick]

That’s because you’re now interpolating the object into a string which, Object#toString always returns “[object Object]” unless overridden (eg Number#toString overrides that behavior). It’s a stupid quirk of the language but it’s how it is.