Question

why <script> {'foo':'bar'}</script> caused Uncaught SyntaxError: Unexpected token : at chrome

and <script> {foo:'bar'}</script> just fine.

Answer 1

Because it’s not an object literal, it’s a code block. What’s inside the brackets is not parsed as key-value pairs, it’s parsed as code.

foo: 'bar' is fine as code, as foo: is a label and 'bar' is an expression.

'foo': is not ok as code as a label can’t be a string, it has to be an identifier.

To make it an object literal, you have to make it an expression, like:

<script> var x = {'foo':'bar'}</script>

or:

<script> ({'foo':'bar'})</script>