Weird JSON parsing behavior in js, "Unexpected token :"

Question

As demonstrated in this jsfiddle, if you have a JS file and you create a JSON object without using it, it behaves differently depending on whether the keys(members) are wrapped in quotes or not.

valid code:{ a: 1};
invalid code: { "a": 1 };

What you will get is an error message (in Chrome, different for FF/IE, but still fails on syntax)

Uncaught SyntaxError: Unexpected token :

but if you use the object in some way, for example: alert({ "a": 1 }); everything is OK again.

Why does this happen?

Answer 1

The statement:

{ a: 1 };

is not an object literal. It's a block statement with one labeled expression in it. It's valid.

This:

{ "a": 1 };

is a syntax error because it's just not parseable. The quoted "a" starts an expression statement inside the block, but then the next token after the string is a colon, and there's no expression form that looks like an expression followed by a colon.

Now:

var x = { "a": 1 };

works because the "{" is not interpreted as the start of a block statement. That statement starts with var, so it's a variable declaration. Within the expression on the right side of the "=" token, the only thing that a "{" can mean is the start of an object literal. Similarly, note that:

({ "a": 1 });

is OK because the opening parenthesis makes the parser expect a nested subexpression, so again the "{" unambiguously means that it's the start of an object literal.

Answer 2

I just realized than when loading the JSON via require and the filename does not end on .json i get this error. Renaming the file to bla.json and it works fine.

Answer 3

This error can popup when doing a jQuery AJAX call using jsonp when jsonp is not necessary. Try switching your data type on your AJAX call if this is the case to normal json

$.ajax({
     dataType: 'json', // try using json rather than json p
     ...
});