What does curly brackets in the `var { ... } = ...` statements do?
Solution 1
They're both JavaScript 1.7 features. The first one is block-level variables:
let
allows you to declare variables, limiting its scope to the block, statement, or expression on which it is used. This is unlike thevar
keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
The second one is called destructuring:
Destructuring assignment makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
...
One particularly useful thing you can do with destructuring assignment is to read an entire structure in a single statement, although there are a number of interesting things you can do with them, as shown in the section full of examples that follows.
For those familiar with Python, it's similar to this syntax:
>>> a, (b, c) = (1, (2, 3))
>>> a, b, c
(1, 2, 3)
The first code chunk is shorthand for:
var {Hotkey: Hotkey} = require("sdk/hotkeys");
// Or
var Hotkey = require("sdk/hotkeys").Hotkey;
You can rewrite the second code chunk as:
let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;
Solution 2
What you're looking at is a destructuring assignment. It's a form of pattern matching like in Haskell.
Using destructuring assignment you can extract values from objects and arrays and assign them to newly declared variables using the object and array literal syntax. This makes code much more succinct.
For example:
var ascii = {
a: 97,
b: 98,
c: 99
};
var {a, b, c} = ascii;
The above code is equivalent to:
var ascii = {
a: 97,
b: 98,
c: 99
};
var a = ascii.a;
var b = ascii.b;
var c = ascii.c;
Similarly for arrays:
var ascii = [97, 98, 99];
var [a, b, c] = ascii;
This is equivalent to:
var ascii = [97, 98, 99];
var a = ascii[0];
var b = ascii[1];
var c = ascii[2];
You can also extract and rename an object property as follows:
var ascii = {
a: 97,
b: 98,
c: 99
};
var {a: A, b: B, c: C} = ascii;
This is equivalent to:
var ascii = {
a: 97,
b: 98,
c: 99
};
var A = ascii.a;
var B = ascii.b;
var C = ascii.c;
That's all there is to it.
Solution 3
This is a destructing assignment in JavaScript and is part of the ES2015 standard. It unpacks or extracts values from arrays or properties from objects into distinct variables.
Array Destructuring
Without destructuring
var foo = ["one", "two", "three"];
var one = foo[0];
var two = foo[1];
var three = foo[2];
console.log(one, two, three);
With Destructuring
var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one, two, three);
Object Destructuring
Without destructuring
var o = {p: 42, q: true};
var p = o.p;
var q = o.q;
console.log(p); //42
console.log(q); //true
With destructuring
var o = { p: 42, q: true };
var { p, q } = o;
console.log(p); //42
console.log(q); //true
Assign new variable names
var o = { p: 42, q: true };
var { p: foo, q: bar } = o;
console.log(foo); //42
console.log(bar); //true
timdream
Updated on July 21, 2022Comments
-
timdream almost 2 years
Not sure if this is a Mozilla-specific JS syntax, but I often found variables being declared this way, for example, in add-on SDK docs:
var { Hotkey } = require("sdk/hotkeys");
and in various chrome Javascript (
let
statement is being used in place ofvar
),let { classes: Cc, interfaces: Ci, results: Cr, utils: Cu } = Components;
I found it very confusing but I am not being able to find any documentation about both syntax, even on MDN.
-
trusktr almost 11 years@Blender How would you search for this structure on symbolhound.com?
-
Blender about 9 years@trusktr: A bit late: symbolhound.com/…
-
Cliff Hall almost 7 yearsThe short answer is here: stackoverflow.com/a/45909752/203704
-
Harshal over 6 yearsI am fine with basic deconstructing. However, in this example we are also assigning the value to a different property name and that syntax is very very confusing. It is opposite to object creation syntax and that adds even more confusion.
-
VLAZ over 3 yearsDoes this answer your question? Javascript object bracket notation ({ Navigation } =) on left side of assign
-
-
Blender over 11 years+1 for the object destructuring examples, they're really helpful. The MDN examples only show array destructuring.
-
Aadit M Shah over 11 years@Blender - They do provide object destructuring examples. Look at Looping across values in an array of objects.
-
Blender over 11 yearsI meant the
var {a, b, c} = ascii;
syntax. -
trusktr almost 11 yearsPlus it makes everything more cryptic to use such an uncommon syntax.
-
Curtis almost 6 yearsThat last example is really weird because normally what's on the left of the colon is what's being assigned.
-
gdbj almost 6 yearsIt's easy to write code, but hard to write code that humans can read. Do we need constructs to make it harder?
-
cheesits456 over 5 years@Blender it takes less characters to type, making your file smaller. For a very large script that will be available for public download, it's always a good idea to reduce filesize as much as possible. I know this comment is 5 and a half years after the one I'm replying to, but I feel it's still worth putting here for others to see if they stumble across this answer and comment thread