2

When I log something like console.log('' + {}); the console would print [Object object] in Chrome, but something different ({}) in node. At this point I would have thought that the console output depends on the execution environment.

However, recently I discovered that, given some not-null object foo, I somehow had Chrome print null instead of the expected output above. So using console.log('' + foo); resulted in null in the console. How is that possible? My first guess was that I must have overridden something important accidentally, like some toString() method. Otherwise I could not explain why Chrome would interpret some not-null object as null when it is added to a string.

Does anyone know how that implicit object-to-string conversion actually works? It is not that this is a show-stopper, but it really makes me wonder.

Edit: I did not include a JSFiddle because this occurs in some quite dependency-heavy class, so there is no proper minimal working example I could offer you. The question does not refer to my code anyway, it is rather basic and technical.

Another edit: For the sake of completeness, I am adding the screenshot I posted in the comments.

Improve this question
5
  • 3
    Do you have a jsFiddle? Commented Apr 27, 2013 at 1:29
  • 2
    Why the downvote? A comment would have been nice. As for the jsFiddle, no, unfortunately not. The work is still undisclosed. The way I formulated the question I do not think it would be helpful, anyway. Commented Apr 27, 2013 at 1:40
  • One reason why you should always create a minimal working example for this kind of problems: In the process of creating the example you most likely find the reason for the problem. Commented Apr 27, 2013 at 1:56
  • 2
    If you are going to make a claim like "non-null object prints out null", you should provide some evidence that this takes place. Commented Apr 27, 2013 at 1:57
  • I did not come here to argue about such things. My point is that when I do console.log(foo === null ? 'It is null' : foo); at some point the object is print out, just as I would have expected. console.log('' + (foo === null ? 'It is null' : foo)); prints null instead, and my question was how that is technically possible. I would not have come here if it wasn't true. Commented Apr 27, 2013 at 2:06

2 Answers 2

Reset to default
1

Since you asked about object to string conversion: Object.toString

If you use objects in string concatenation expressions it will call the object's toString() function. You can implement your own function, which could cause the problem you described:

function Foo(bar){
  this.bar = bar;
}
Foo.prototype.toString = function fooToString(){
    return this.bar;
};

console.log('' + new Foo(null)); // null

Without seeing any code I guess it's this or it's really just the String "null". You said you already checked the toString function, but to make sure you could also print it at runtime with foo.toString.toSource(). Or just run the object through a debugger and inspect it.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you very much, your confirmation that toString() was the right thing to look at actually got me a bit further, but on the other hand, now I am completely confused: "'' + foo" evaluates to "null". "'' + foo.toString()'' evalutes to "[Object object]". When I override toString(), this remains the same. Since in JSFiddle this works just well, I think it is some dependency messing around with the interpreter I can hardly imagine, since toString() does not seem to get called at all in this specific case.
I will accept this answer since it really answers the question: How are JavaScript objects converted to strings when using string addition?
I actually thought your idea of using the debugger was nice for taking a screenshot of this oddity: s8.postimg.org/ty5pxj3n9/null_string_conversion.png The behavior is the same in both the latest Chrome and Firefox versions.
1

In the first case the difference is simply in how the different environments choose to represent an object as a string in the console. They both mean the same thing, namely that the thing you're logging is an object. You might see a further difference if you tested in the developer tools in Firefox or Safari.

In your second example, I suspect the value of foo is null - I just can't think of a situation in which the statement console.log('' + foo) would print null if the value of foo wasn't set to null or, as Xymostech says in the comments, set to the string null.

Improve this answer

13 Comments

No offense, but I even wrote not-null in bold. The object is not null! console.log(foo) !== console.log('' + foo). The first lets me inspect the object, the second prints null. Please read the question properly.
None taken Michael, and I did read the question. I just can't think of a situation in which the statement console.log('' + foo) would print null if foo wasn't null.
Alright then. Well, this is exactly why I came up with this question. Just to give one more example: console.log('' + (foo === null ? 'Oh noes, it's null!' : foo)); prints null, too. This was the first thing I did, but it can only occur when foo is not null.
@MichaelJess Was foo by any chance the string, 'null'?
The statement you've posted in the comment isn't valid. I take it it's just a typo rather than an error in your code?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.