Why the open quote and bracket for eval('(' + jsonString+ ')') when parsing json string

Question

Can you please tell me the reason for this specific syntax structure

 eval('(' + jsonString+ ')')

When parsing json text. Crockford says "The text must be wrapped in parens to avoid tripping on an ambiguity in JavaScript's syntax." here. What does that mean?

Can we avoid it?

Answer 1

An object literal needs to be wrapped in parentheses to properly be evaluated in eval context and other contexts:

eval('{}') is undefined, for example. whereas eval('(' + '{}' + ')' ) evaluates to Object.

If you tried this in the console, for example: {"foo":"bar"} it would throw an invalid label at you. Wrap it in parentheses and it becomes a valid expression.

Answer 2

The syntax ambiguity that Crockford refers is that if an open curly brace is not found on expression context, it will be recognized like a block, and not like the start of a object literal.

For example:

{"foo": "bar"} // SyntaxError

Will give you a syntax error, because it will be interpreted as a block, with a string literal "foo", and a unexpected usage of the token :.

On the other hand, the parentheses, formally called the grouping operator, can only evaluate expressions, therefore we will not have any syntax ambiguity because a block can only be expected on a statement context.

({"foo": "bar"})

---

Edit: @el.pescado makes an interesting question:

Can you explain why eval('{}') is undefined?

ECMAScript describes an internal type to explain the behavior of statements, it's called The Completion Specification Type.

Values of the Completion type are triples of the form of (type, value, target), where type can be normal, break, continue, return, or throw.

value can be any language value or empty, and target any Identifier or empty.

An empty block (the production Block : {}) explicitly returns the following completion:

Return (normal, empty, empty).

The eval function, after executing the code, and exiting the newly created execution context, checks the result completion of the evaluated code, and in the Step 7 we can see that undefined is explicitly returned if the completion type is normal and the completion value is empty:

...

7- If result.type is normal and its completion value is empty, then return the value undefined.

...

Answer 3

@el.pescado, the string after executed by eval should be javascript understandable. i.e if you are assigning the above string to the varible as follows

eval(' var foo1 = {"foo" : "bar"}'); foo1.foo will return bar

so, my assumption is, as there is no statement like that starts with "{" in javascript, it is throwing the error.