What does curly brackets in the `var { ... } = ...` statements do?

JavascriptEcmascript 6DestructuringJavascript 1.7

Javascript Problem Overview


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 of var),

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.

Javascript Solutions


Solution 1 - Javascript

What you're looking at is a destructuring assignment. It's a form of [pattern matching](http://learnyouahaskell.com/syntax-in-functions#pattern-matching "Syntax in Functions - Learn You a Haskell for Great Good!") 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 2 - Javascript

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 the var 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 3 - Javascript

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

Solution 4 - Javascript

There is documentation for the let statement on MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let

let is similar to var in that it limits the scope of the declared variable. It allows you to declare a variable inside a if(){} block (or some other block) and have that variable only "visible" inside that block (JavaScript, until now, has function scope and not block scope as most other languages). So the let is basically a "fix" for something many people have issues with. Note that tihs is a JavaScript 1.7 feature.

Haven't found anything on {Foo}.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiontimdreamView Question on Stackoverflow
Solution 1 - JavascriptAadit M ShahView Answer on Stackoverflow
Solution 2 - JavascriptBlenderView Answer on Stackoverflow
Solution 3 - JavascriptDeeksha SharmaView Answer on Stackoverflow
Solution 4 - JavascriptJan HančičView Answer on Stackoverflow