Immediately accessing an object's property

Question

Given these four examples of defining an object and then attempting to immediately access their properties:

{foo: 'bar'}.foo
// syntax error: unexpected_token

I expected this would return the value of 'foo', but it results in a syntax error.

The only explanation I can come up with is that the object definition hasn't been executed and therefore is not yet an object. It seems that the object definition is therefore ignored and the syntax error comes from attempting to execute just:

.foo
// results in the same syntax error: unexpected_token

Similarly:

{foo: 'bar'}['foo']
// returns the new Array ['foo']

Which seems to be evidence that the object literal is ignored and the trailing code is executed.

These, however, work fine:

({foo: 'bar'}).foo
// 'bar'

({foo: 'bar'})['foo']
// 'bar'

The parentheses are used to run the line of code and since the result of that parenthetical operator is the instantiated object, you can access properties.

So, why is the object definition ignored and not executed immediately?

Is this just curiousity? Or is there actually a legitimate reason to use: `{foo: 'bar'}.foo`? — jfriend00, Sep 22 '11 at 17:01

Arnaud Le Blanc · Answer 1 · 2011-09-22T17:21:31.523

8

It's not ignored, it's just not recognized as an object here.

{ ... } at the start of a statement is parsed as a Block^[spec] of code.

In the case of {foo: 'bar'}.foo, the inner code foo: "bar" is parsed as a LabelledStatement^[spec].

So {foo: 'bar'} parses correctly (even if it doesn't do what you expect) but the property access syntax is actually causing the syntax error, as accessing a property on a block is not valid.

As you noticed the solution is to enclose the object in parentheses:

({foo: 'bar'}).foo

Starting the statement with ( causes the parser to search for an expression inside of the parentheses. {foo: 'bar'} when parsed as an expression is an Object Initializer^[spec], as you expected.

For {foo: 'bar'}['foo'], it's actually parsed as two separate statements: a block ({foo: 'bar'} and an Array initializer (['foo']):

{foo: 'bar'};
['foo'];

edited Sep 22 '11 at 17:21

answered Sep 22 '11 at 16:55

Arnaud Le Blanc

98,321
23
206
194

If it's not allowed, why doesn't javascript return a syntax error in the {foo: 'bar'}['foo'] case? – wlmeurer Sep 22 '11 at 17:01
2

Yes, as the error states - that is a syntax error. The correct syntax is to use parentheses. – gilly3 Sep 22 '11 at 17:02
@elmeurer Also note the wording "at the start of a statement" (or in a "statement" context). While not very pretty, this is valid: `f = {a: "b"}.a` -- the `{...}` occurs in an "expression" context there. – Sep 22 '11 at 17:04
2

There is no syntax error in the {foo: 'bar'}['foo'] case, as I mentioned above. It returns the array ['foo'], as if I just ran the code ['foo'], to instantiate an array ['foo']. – wlmeurer Sep 22 '11 at 17:06

score 6 · Accepted Answer · edited May 23 '17 at 12:22

It's a matter of the "context", your first two examples are not object literals!

They are statement blocks, for example:

{ foo: 'bar' }

The above code is evaluated as a block, containing a labelled statement (foo) that points to an expression statement (the string literal 'bar').

When you wrap it on parentheses, the code is evaluated in expression context, so the grammar matches with the Object Literal syntax.

In fact there are other ways to force the expression evaluation, and you will see that the dot property accesor notation works when applied directly to an object literal e.g.:

({foo:'bar'}.foo);  // 'bar'
0, {foo:'bar'}.foo; // 'bar'
0||{foo:'bar'}.foo; // 'bar'
1&&{foo:'bar'}.foo; // 'bar'
// etc...

Now in your second example:

{foo: 'bar'}['foo']

What happens here is that the two statements are evaluated, first the block and then the expression statement that contains the Array literal.

Is a syntax ambiguity similar to what happens with function expressions vs function declarations.

Immediately accessing an object's property

2 Answers2

Linked

Related