Why does {} + [] return 0 in Javascript? [duplicate]

Question

Possible Duplicate:
What is the explanation for these bizarre JavaScript behaviours mentioned in the 'Wat' talk for CodeMash 2012?

I know that when [] is coerced to a string it returns the empty string (""), and when {} is coerced to a string it returns "[object Object]".

When I run [] + {} in my browser's Javascript console, it returns as I would expect:

>> [] + {} "[object Object]" 

But when I run {} + [], it returns a completely unexpected value:

>> {} + [] 0 

What could be causing it to return 0?

Answer 1

When there is a { at the beginning of a statement, it will be interpreted as a block, which may contain zero or more statements. An block with no statements in it will have an empty continuation value.

In other words, in this case, {} is interpreted as an empty code block.

The statement ends after the ending brace }, which means that the next three characters +[] comprise a statement of their own.

At the beginning of an expression or statement, + is the unary plus operator, which coerces its operand to a number.

So +[] is the same as Number([]), which evaluates to 0.

In short, {} + [] is an empty code block followed by an array coerced to a number.

---

All that said, if you evaluate {} + [] inside an expression, it will return what you expect:

>> ({} + [])  "[object Object]"  

Another interesting thing is that you cannot begin a statement with an object literal because the interpreter will try to parse it as a statement. Doing this

{ "object": "literal" }; 

will throw a syntax error.

Answer 2

Because the {} is treated as a block. Thus your statement is actually:

{  //empty block here }  +[] //0 same as Number([]) 

This is why this is invalid javascript:

eval('{hello: "world", key: "value"}') //Syntax error 

You can add () to make it an expression (blocks cannot be used in an expression so it will be object initializer:

eval('({hello: "world", key: "value"})') //Object