This question already has answers here:
What is this JavaScript syntax: {Ci, CC}? [duplicate]
(2 answers)
Closed 7 years ago.
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?
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 }.
Related
This question already has answers here:
Create object from class name in JavasScript ECMAScript 6
(8 answers)
Closed 4 years ago.
I try to setup an instance dynamically from a string. I've read many questions about it but the answers does not work for me.
It says it's possible to use window before the name to set the instance. It does not work.
class MyClass {
// Something useful
}
let params = {};
let name = 'MyClass';
let instance = new window[name](params);
I've also tried to do this without luck (throws error):
let instance = new window['MyClass'](params);
However, this works:
let instance = new MyClass(params);
Why can't I use window in this case? Any other ideas?
Only global variables are put into window automatically.
Create an object that maps from class names to classes:
const classMap = {
"MyClass": MyClass,
"MyClass2": MyClass2,
...
};
Then use classMap[name](params) rather than window[name](params).
This question already has answers here:
What is the difference between 'let' and 'const' ECMAScript 2015 (ES6)?
(10 answers)
Keyword 'const' does not make the value immutable. What does it mean?
(5 answers)
Closed 5 years ago.
I'm wondering what is the difference between let and const in ECMAScript 6. Both of them are block scoped
The difference between let and const is that once you bind a value/object to a variable using const, you can't reassign to that variable. Example:
const something = {};
something = 10; // Error.
let somethingElse = {};
somethingElse = 1000; // This is fine.
Note that const doesn't make something immutable.
const myArr = [];
myArr.push(10); // Works fine.
Probably the best way to make an object (shallowly) immutable at the moment is to use Object.freeze() on it.
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 5 years ago.
While upgrading a private yeoman generator I stumpled upon this statement while looking through the official generator-webapp:
const { features } = answers;
I wasn't able to find anything about this, aside from the fact that it only works on node >=6.
What does this statement do? Where is this defined?
It's destructuring assignment. It's equivalent to:
const features = answers.features;
It was introduced in ES2015.
This:
const { features } = answers;
Is the shorthand of this:
const features = answers.features;
You could also declare many variables in a single line, see following please:
var answers = {"features": "test"};
const { features } = answers;
console.log(features);
var longObj = {"attr1": "val1", "attr2" : "val2"};
const { attr1, attr2 } = longObj;
console.log(attr1, attr2);
I hope it was clear. Bye.
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
ES6 Object Destructuring Default Parameters
(1 answer)
Closed 6 years ago.
I was reading the source for a MeteorJS package (this one) when I came across this:
const {
getMeteorData,
pure = true,
} = expandedOptions;
I did some research to figure out what this code would do, but couldn't find any other instance of const being used like this, or any documentation to clarify it for me.
Any hints, please?
It is using es6 to unpack (or destructure) the values inside the expandedOptions object.
const val = {a:1, b:"hello"};
const {
a,
b
} = val;
console.log(a); //1
console.log(b); //"hello"
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 7 years ago.
react.js documentation has following variable declarations:
var { Image, StyleSheet, Text, View } = React;
Could you tell what does it meant? Thank you.
This is the destructuring syntax, which is part of ES6.
It's a feature of ES6 called destructuring. Essentially the same as writing:
var Image = React.Image;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;