Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the ‘value’ of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.
TIL. In Firefox, at least: an un-expanded console.log does show updates when expanded, but pre-expanded console.log & console.dir do not show updates made later, it seems. In any case, the one-line un-expanded output does not update. Not sure about other browsers. Feels wat.
Don’t use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).
This string is defined by "user: " + user. The + operator with a string on the left implicitly calls .toString() on its right argument, user in this case. But the default implementation of toString for all objects, such as this user object, returns only the string [object Object]`.
Both of the following console.log calls log an object:
console.log(user);
console.log({user});
No strings are involved here. console.log doesn’t call toString to show user; it uses the JavaScript runtime to reflect on the object keys and values directly and shows a special UI for browsing them.
As others have mentioned, you can also call console.log like this, which logs a string and then separately logs an object on the same line, with no + operator causing .toString() to be called:
If you need to explicitly convert the object to a string like this, the output will be easier to read if you pretty-print it. You can do this by passing JSON.stringify a value such as 2 or '\t' for its third argument, space:
Instead of concatenating,
console.logcan print multiple arguments:console.log('stage 2', thing)This is what I’ve always done, feels much cleaner to have the label as it’s own argument then wrapping the object.
console.tableis also usefulI’ve started to use
console.tablefor pretty much everything. It’s so nice.Thanks for letting me know about
console.tablethis looks super useful.console.countcan also be useful in situations where you’re trying to find out how many times things are getting called/rendered/etc.Wow. This part on MDN about console.log is news to me.
TIL. In Firefox, at least: an un-expanded console.log does show updates when expanded, but pre-expanded console.log & console.dir do not show updates made later, it seems. In any case, the one-line un-expanded output does not update. Not sure about other browsers. Feels wat.
It’s pain to think of the hours I’ve wasted not knowing this… thank you for sharing :)
Nice tip ! Still I don’t get what differs between the two ways of calling console.log. Does someone has a deeper explanation ?
This
console.logcall logs a string:This string is defined by
"user: " + user. The+operator with a string on the left implicitly calls.toString()on its right argument,userin this case. But the default implementation oftoStringfor all objects, such as thisuserobject, returns only the string[object Object]`.Both of the following
console.logcalls log an object:No strings are involved here.
console.logdoesn’t calltoStringto showuser; it uses the JavaScript runtime to reflect on the object keys and values directly and shows a special UI for browsing them.As others have mentioned, you can also call
console.loglike this, which logs a string and then separately logs an object on the same line, with no+operator causing.toString()to be called:That makes perfect sens to me, thank you for the anwser :)
The work-around I found is
console.log("x: " + JSON.stringify(x));If you need to explicitly convert the object to a string like this, the output will be easier to read if you pretty-print it. You can do this by passing
JSON.stringifya value such as2or'\t'for its third argument,space: