This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 5 years ago.
I have recently come across this line of code.
const { Bar, Data: { Selectors } } = require('some-module');
Can someone please tell me what does Data: { Selectors } do in this piece of code? I understand that it is importing some module in my codebase, just confused about the {Selectors} part.
Also, if I want to write it using import syntax what would be the equivalent code for the same?
e.g : import Bar from "some-module"
It doesn't really have to do with modules (syntax is the same for import or require: import {Bar} from "some-module" ), it's just a destructuring assignment creating two variables, Bar and Selector.
Here's another example along with many other ES6 features http://es6-features.org/#ObjectMatchingDeepMatching
const obj = {Bar: 1, Data: { Selectors: [1,2]}};
const { Bar, Data: { Selectors } } = obj;
// This is another ES6 feature, same as saying
// console.log({Bar: Bar})
console.log({Bar});
console.log({Selectors});
The above is the same as saying
const Bar = obj.Bar;
const Selectors = obj.Data.Selectors
Related
This question already has answers here:
Private properties in JavaScript ES6 classes
(41 answers)
Closed 4 years ago.
I know this question has been asked for many times, however, most of them are either for the Node.js solutions or does not work in the browsers.
So, is it possible to implement a private method in browser javascript class?
<html>
<body>
<script>
class Happy
{
constructor()
{
}
_leo()
{
console.log("ff");
}
}
var h=new Happy();
h._leo();
</script>
</body>
</html>
However, the above code still outputs "ff" in the console, how can I fix it?
This illustrates how to hide a method name, effectively making the method uncallable outside the hiding closure:
const Klass = (function() {
const privName = Symbol("priv");
class Klass {
publ() {
console.log("in publ");
this[privName]();
}
[privName]() {
console.log("in priv");
}
}
return Klass;
})()
let inst = new Klass();
inst.publ();
// => in publ
// in priv
It uses the fact that Symbol() returns an entity that cannot be replicated, the fact that privName is not exposed anywhere outside the closure, and the fact that we can define properties with calculated names using the square bracket notation.
Unlike the function-hiding mechanism demonstrated by ultratoad, this is not just a helper function, it is a true method. Just note that you can't call it using the dot notation - dot notation only works when you know the name, and here, no-one does except privName.
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;
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 7 years ago.
What does this code translate to? I can't figure out how the variables inside the curly braces are related to = require('react-router').
var { create: createRouter, HistoryLocation, HashLocation } = require('react-router')
It is from this repo
This is a feature called destructuring assignment in ES6. This is what happens:
// Imagine this is the object you require
var reactRouter = {
create: 'foo',
HistoryLocation: 'bar',
HashLocation: 'baz'
}
// Destructure
var {create: createRouter, HistoryLocation, HashLocation} = reactRouter
// Now the variables are in scope
console.log(createRouter, HistoryLocation, HashLocation)
//^ foo, bar, baz
Looks like it's destructuring assignment. It is a part of Javascript ES6 and is described here.
The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
Cool new feature! I'm looking forward to using it.