How exactly does the JavaScript expression [1 [{}]] parse?

Question

Can you explain how the JavaScript expression:

[1 [{}]]

parses/evaluates? In Firefox, Chrome, Konqueror, and rhino, it seems to create an array with a single element, undefined. However, I don't understand why.

In Firefox:

[1 [{}]].toSource()

produces

[(void 0)]

Replacing 1 with other JavaScript values seems to yield the same result.

Update: I think I understand now. codeka, Adrian, and CMS clarified things. As far as the standard, I tried to walk through ECMAScript 5.

1. 1 [{}] is a Property Accessor, so it's covered in §11.2.1.
2. baseReference is the result of evaluating 1, so still 1.
3. baseValue = GetValue(baseReference) == 1.
4. At GetValue (§8.7.1), Type(1) is not Reference (a resolved name binding), so return 1.
5. propertyNameReference is result of evaluating {}, so an empty object.
6. propertyNameValue = GetValue(propertyNameReference) == {}
7. At CheckObjectCoercible(baseValue) (§9.10), we return (Number is object-coercible).
8. propertyNameString = ToString(propertyNameValue)
9. At ToString (§9.8), return ToString(ToPrimitive({}, hint String))
10. At ToPrimitive (§9.1), return result of object's [[DefaultValue]], passing PreferredType (string).
11. At [[DefaultValue]] (§8.12.8), let toString be result of [[Get]] with argument toString.
12. This is defined at §15.2.4.2 to return "[object " + [[Class]] + "]", where [[Class]] is "Object" for the default object prototype.
13. Since there is a callable toString, we call it with argument this being {}.
14. Return a value of type Reference, whose base value is BaseValue (1) and whose referenced name is propertyNameString ("[object Object]").

We then go to Array initializer (§11.1.4), and construct a single element array with the result.

Answer 1

Javascript is a dynamic object language, accessing a property creates the property.

Answer 2

If we break it up a bit, you'll see:

var foo = 1;
var bar = {};
var baz = foo[bar];

[baz];

I believe it's valid JavaScript, but I'm not an expert...

Answer 3

It is because you are trying to get the property {} of the object 1 and then place it in an array. 1 doesn't have the property {}, so 1[{}] is undefined.

If you replace the 1 with an array, you will see how it is working. With 1 as [5] and {} as 0, it is [[5][0]].

Also, keep in mind that obj['property'] is the same as obj.property.

Answer 4

Reading the OP and Nick comments, I think I can expand a little bit more the Adrian's answer to make it clearer.

It's perfectly valid JavaScript.

JavaScript handles object property names as strings, objects cannot contain other types or other objects as keys, they are just strings.

The bracket notation property accessor (MemberExpression [ Expression ]) implicitly converts the expression between brackets into a string, so:

var obj = {};
obj[{}] = "foo";
alert(obj["[object Object]"]); // foo

In the above example you can see that I assign a value to the {} property, and {}.toString() (or {}+'') produces the string "[object Object] (via Object.prototype.toString).

The expression 1 [{}] implicitly converts the 1 Number primitive to an object (this is made by the property accessor) and it lookups a property named "[object Object]" the property lookup is made on the Number.prototype and the Object.prototype objects, for example:

1['toString'] === Number.prototype.toString; // true

Finally, the 1 [{}] expression is itself enclosed in brackets ([1 [{}]]), this is actually an Array literal.

In conclusion here is how the parser evaluates the expression:

 [1 [{}]];
 //   ^ The accessor expression is evaluated and converted to string

 [1 ["[object Object]"]];
 // ^ A property lookup is made on an Number object 
 //   trying to access a property named "[object Object]"

 [undefined];
 //   ^ the property is obviously not found

   [undefined];
 //^         ^
 // An array literal is created with an element `0` which its value is `undefined`