2

I was reading a MDN docs about firefox addons and I saw some syntax I didn't understand.
In one of the examples they say:

var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");

var button = ToggleButton({
  ...
});

Why is the variable name inside the braces: var { ToggleButton } =?

What is happening here?

cdbitesky
  • 1,390
  • 1
  • 13
  • 30
Ifch0o1
  • 900
  • 1
  • 14
  • 32

1 Answers1

2

You are witnessing a usage of the new ES 2015 feature called destructuring.

Refer: https://github.com/lukehoban/es6features#destructuring

Destructuring with Objects is supported in Firefox: https://kangax.github.io/compat-table/es6/#destructuring_with_objects

Update:

Here is the proof. The ToggleButton module exports ToggleButton object: https://github.com/mozilla/addon-sdk/blob/master/lib/sdk/ui/button/toggle.js#L79

And as per the ES 2015 destructuring rules, it gets destructured properly into { ToggleButton }.

bits
  • 8,110
  • 8
  • 46
  • 55
  • Can the downvoter please explain why you think I am wrong? – bits Aug 27 '15 at 18:42
  • So if I understand correctly, the above code will check if we already have variable named "ToggleButton" and if is not, It will define it? – Ifch0o1 Aug 27 '15 at 18:49
  • 2
    With current example, destructuring isn't much useful. It is useful when you wish to pick-n-choose multiple properties from an object with even more properties. For example: `var {name, age} = {name:'John', age:27, life:'good'};` – bits Aug 27 '15 at 18:54