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

admin管理员组

文章数量:1324827

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.

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.

• javascript
• firefox
• syntax
• variable-assignment
• mozilla

Share Improve this question Follow edited Feb 4, 2017 at 21:37 grant asked May 10, 2012 at 0:36 grantgrant 74588 silver badges1717 bronze badges 2

• possible duplicate of Constant declaration with block – Wladimir Palant Commented May 10, 2012 at 4:46
• 1 Found this question while posing an almost identical question of my own :) – Motti Commented Dec 17, 2014 at 14:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Looking at "Destructuring Assignment" links (i.e. http://en.wikipedia/wiki/JavaScript_syntax#Assignment and http://dailyjs./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.

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

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

本文标签：