Javascript - eval() `{}` expression

Question

Why can a string like "{opacity: 1.0, width: '132px'}" not be evaluated using eval() as is?

eval("{opacity: 1.0, width: '132px'}");

// invalid label
// {opacity: 1.0, width: '132px'}
// ---------------ꜛ

eval("v = {opacity: 1.0, width: '132px'}");

// works!

Answer 1

Why can a string like "{opacity: 1.0, width: '132px'}" not be evaluated using eval() as is?

Because the text occurs where a statement or block is expected, not an expression, and so the { denotes the beginning of a block, not the beginning of an object initializer. (And then opacity: is interpreted as a label followed by the statement separator [a comma], and then width: looks like another label, which is not valid there.)

Putting it in parentheses changes the parsing context so that an expression is expected, and so the { opens the initializer. (This is the same reason you see self-executing anonymous functions wrapped in parentheses, e.g. (function(){ ... })(); rather than just function(){ ... }();.)

Answer 2

Why can a string like "{opacity: 1.0, width: '132px'}" not be evaluated using eval() as is?

Because {opacity: 1.0, width: '132px'} is invalid javascript as-is. Try putting this statement as-is and you will get a js error. On the other hand v = {opacity: 1.0, width: '132px'} is valid javascript.

Answer 3

Try something like this:

eval("({opacity: 1.0, width: '132px'})");