javascript - why obj={x,y} works in Chrome?

Question

var obj = { type: 'data', x, y, data: []}

Obviously this was my typo, {x,y} should have been {x:x, y:y}. But it does what I want, in Chrome, field x gets the value of a local variable x.

But why does it work?

Answer 1

It is part of the ECMAScript 2015 (or ECMAScript 6). You can create new properties in Objects in Object literals, just by specifying the identifiers.

Quoting MDN's Object Initializer's Property Definitions section,

With ECMAScript 6, there is a shorter notation available to achieve the same:

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

---

The corresponding section in ECMAScript 6 specification is here,

AssignmentProperty : IdentifierReference Initializer_opt

1. Let P be StringValue of IdentifierReference.
2. Let lref be ResolveBinding(P).
3. ReturnIfAbrupt(P).
4. Let v be GetV(value, P).
5. ReturnIfAbrupt(v).
6. If Initializer_opt is present and v is undefined, then
   1. Let defaultValue be the result of evaluating Initializer.
   2. Let v be GetValue(defaultValue).
   3. ReturnIfAbrupt(v).
   4. If IsAnonymousFunctionDefinition(Initializer) is true, then
      1. Let hasNameProperty be HasOwnProperty(v, "name").
      2. ReturnIfAbrupt(hasNameProperty).
      3. If hasNameProperty is false, perform SetFunctionName(v, P).
7. Return PutValue(lref,v).

Basically, the specification says that, if you are using just an identifier, a new property with the name of the identifier will be created, and the value will be the actual value of that identifier. It can even be a name of the function.

var a = "foo", b = 42, c = {}, d = function () {};    
console.log({a, b, c, d});
// { a: 'foo', b: 42, c: {}, d: [Function] }