JavaScript Object literal notation confusion

Question

In Firefox console, this code will generate error:

{"d" : ["bankaccountnumber", "$1234.56"] } 
>   SyntaxError: invalid label {
> message="invalid label",  more...}

this code works just fine

{d : ["bankaccountnumber", "$1234.56"] } 
> ["bankaccountnumber", "$1234.56"]

this code works fine as well

var a = {'d' : ["bankaccountnumber", "$1234.56"] };
a.d
> ["bankaccountnumber", "$1234.56"]

Can someone help to explain why is the diference? thanks!

Answer 1

This is because of ambiguous syntax. When you try to make a plain object literal in the first two lines, JavaScript is really interpreting it as a set of braces, then a label, then a statement:

{
    d: ["bankaccountnumber", "$1234.56"]
}

This code doesn't evaluate to an object, but just to the array. The first example, you tried to use a string as a label, which is in correct syntax. The third example works properly, creating an object and storing it in a.

Answer 2

it is probably having a hard time deciding whether it is an expression or a block. If you use parenthesis around the object it works as it forces an expression. The grouping operator, ( and ), forces { and } to be parsed as object literal.

({"d" : ["bankaccountnumber", "$1234.56"] }) // works

Read Named function expressions demystified. Its not directly related to this issue but does address it when talking about the use of grouping-parenthesis and eval().