Question

Why does the second line of code produce an error but not the third?

{ foo: 'bar' } // => 'bar'

{ "foo": 'bar' } // => SyntaxError: Invalid label

({ "foo": 'bar' }) // => { foo: 'bar' }.

Answer 1

The relevant part of the language specification is http://es5.github.com/#x12.4

ExpressionStatement : [lookahead ∉ {{, function}] Expression ;

The lookahead part means that something is only treated as an expression when it appears where a statement is expected if it does not start with { or function.

---

{ foo: 'bar' }

is a block of statements containing the expression statement 'bar' with label foo. Labels allow you to break or continue from named loops but can be attached to any statement, not just loops.

{ "foo": 'bar' }

The parser starts parsing this, finds an expression "foo" and then looks for a binary operator but : is not a valid binary operator so it fails with a syntax exception.

({ "foo": 'bar' })

Here the parentheses enter an expression context, so the { is treated as starting an object constructor instead of as the start of a block.