Javascript - Assigning multiple variables to object properties using curly braces in variable declaration

Question

While looking at some Javascript code for Mozilla's (Firefox) Add-on SDK, I saw kind of variable declaration I hadn't seen before:

var { foo, bar } = someFunction("whatever");  // just an example

See those curly braces around the variable name? Turns out, this is a way of assigning the values of properties of an object to multiple variables all at once. It seems similar to destructuring assignment or PHP's list, except with object properties instead of arrays.

I actually found this out through some fiddling, since there appears to be no documentation on it. Take a look at this code:

function gimmeAnObject() {
    return {
        foo: "hey",
        bar: "sup"
    };
}

console.log(gimmeAnObject()); // Object { foo="hey", bar="sup" }

var { foo, bar } = gimmeAnObject();

console.log(foo); // hey
console.log(bar); // sup

I also found that this only works in Firefox. Chrome will instead throw an error: "Uncaught SyntaxError: Unexpected token {". That explains why I hadn't seen it before I started looking at Firefox add-on code.

Has anyone else seen this kind of variable declaration before? Why can't I find any documentation on it? Since it only works in Firefox, I'd think it might be a Mozilla thing, but I couldn't even find anything about it on MDN. Then again, maybe I just didn't know what to search for.

possible duplicate of [Constant declaration with block](http://stackoverflow.com/questions/10199229/constant-declaration-with-block) — Wladimir Palant, May 10 '12 at 04:46
Found this question while composing an almost identical question of my own :) — Motti, Dec 17 '14 at 14:42

score 5 · Accepted Answer · edited May 10 '12 at 01:19

Looking at "Destructuring Assignment" links (i.e. http://en.wikipedia.org/wiki/JavaScript_syntax#Assignment and http://dailyjs.com/2011/09/12/destructuring/) it looks like this construct is destructuring assignment.

Wikipedia:

In Mozilla's JavaScript, since version 1.7, destructuring assignment allows the assignment of parts of data structures to several variables at once. The left hand side of an assignment is a pattern that resembles an arbitrarily nested object/array literal containing l-lvalues at its leafs which are to receive the substructures of the assigned value.

In JavaScript arrays and objects are more or less the same so it is not very surprising that construct supported for arrays is also supported for objects.

Huh, looks like you're right. I wonder why there's so little documentation on it, though. I guess no one but Mozilla saw the usefulness of destructuring assignment. — grant, May 10 '12 at 01:27

score 0 · Answer 2 · answered May 10 '12 at 00:38

0

You can't do it. You have to name a var and do something like this:

var myObj = (function(){
    return {
        foo: 'foo',
        bar: 'bar'
    };
})();

answered May 10 '12 at 00:38

Danilo Valente

11,037
8
52
66

1

You'd think so, yes, but it seems in Firefox, you can. Try running the jsFiddle link I posted in Firefox with a console open. – grant May 10 '12 at 00:44
Maybe Firefox is a little bit more permissive, or it just have an own implementation that allows it. But I guess this declaration is not in the web standards – Danilo Valente May 10 '12 at 00:47
2

It's being added to web standards. Wait a few years. ;) – Boris Zbarsky May 10 '12 at 12:29

Javascript - Assigning multiple variables to object properties using curly braces in variable declaration

2 Answers2

Linked

Related