ECMAScript 6 and Object Literal Property Value Shorthand

Constructing an object using the literal syntax is something that is very familiar to every JavaScript developer, quite likely because this reminds everyone of JSON. While every object property needs to be either a key-value pair or getter/setter, this may change in the near future. Another syntactic sugar in the upcoming ECMAScript 6 is the object literal property value shorthand.

As you can see, this works because the property value has the same name as the property identifier. This a new addition to the syntax of Object Initialiser (section 11.1.5) in the latest ECMAScript 6 draft Rev 13. Of course, just like the limitations set from ECMAScript 3, you can’t use a reserved word as your property name.

What about real-world code which can use the shorthand notation? Somewhere in Backbone.js, we should be able to use the following form instead of its longer one:

Such a shorthand won’t dramatically change your code, it only makes everything a little bit sweeter!

Addendum. While the literal shorthand is useful on its own, in many cases it would be more frequently encountered as it is combined with object pattern (see my previous post on ECMAScript 6 destructuring). Thus, the following code fragment:

The first problem came up in my mind when reading this syntactic sugar — the code cannot be minified, otherwise it would be broken, params are not the same as property names any more unless these params are not minified by configuring minifier tools…

http://ariya.ofilabs.com/ Ariya Hidayat

Care to elaborate? I think a minifier should not aggressively modify property names anyway in a construct involving an object literal.

Roy Ling

But it would minify function parameters, for example:
function createMonster(name, power) {
return { type: ‘Monster’, name, power };
}
name & power may be minified to a and b. If so, the returned object literal would have only attributes of a and b instead of name and power.

http://ariya.ofilabs.com/ Ariya Hidayat

This is a similar situation in case name and power are used inside the function body: the minifier needs to understand the scope and implication of the parameters.

In case of ES 6, it must have the explicit knowledge that such a syntax sugar exists and thus it needs to rewrite the code into something like:

This makes sense, minifiers need to be improved to be aware of this sugar. Thanks!

Josh

I like this, would be excellent if this could still be combined with the default values ES6 spec, so ({title: title, author: author}) can be written as ({title: title = “abc”, author: author = “def”}) or event better ({title = “abc”, author = “def”}). To me this would make for some very readable clean JS

Josh

I really think it breaks readability as well. That could be such a huge clutter in a large application.

Search for:

whoami

My name is Ariya Hidayat. These days, I promote software craftsmanship, JavaScript, HTML5, CSS3, and general web technologies. I write blog posts regularly and speak at developer events from time to time.

I am a big believer in sharing and openness. I have been involved with FOSS (free/open-source software), contributing code to projects such as KDE, Qt, and WebKit. In my little spare time, I also run projects such as PhantomJS (browser automation) and Esprima (JavaScript parser).

Notice

This blog is my personal space. Unless otherwise noted, I don't discuss activities related to my professional work. All opinions expressed in this blog are my own and do not necessarily represent the official view of my employer.

Imprint

Certain links, including hypertext links, in my blog will take you outside my blog. Links are provided for your convenience and inclusion of any link does not imply endorsement or approval of the linked site, its operator or its content. I am not responsible for the content of any website outside of my blog.

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.