why can't object literal call toString() method like {}.toString() cause error?

Question

When object literal calls toString() method like {}.toString() will cause syntax error, but when array literal call toString() it is OK. And when I assign the object literal to a variable, then when it call the toString() method will be OK. Why? For example:

var o = {};
o.toString();  // OK

{}.toString(); 
// > Uncaught SyntaxError: Unexpected token .
[1, 2, 3].toString(); // OK

Thanks!

Answer 1

It's because {} is seen as a valid block first, instead of a literal in that context.

In simple terms - consider that line is interpreted from left to right, encounters { and therefore expects that a block has started. When the block ends, it encounters . and that identifier is not allowed there.

If you were to use ({}).toString() that will work.

This is because the line starts with ( and therefore expects an expression, it correctly identifies the {} as an expression which is evaluated to an empty object and therefore '.toString()` is allowed.

If {} is used in another context - e.g. in your example o = {} this is correctly interpreted as an empty object because is's on the right-hand side of an assignment (after =).

Note that in ES6 there is a similar but more common/practical situation where understanding this is important - when returning objects in one-liner arrow functions, e.g.

[1,2,3,4].map(val => { v: val, isOdd: v % 2 === 1 }) // ERROR
[1,2,3,4].map(val => ({ v: val, isOdd: v % 2 === 1 })) // OK