This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Syntax: const {} = variableName, can anyone explain or point me into the right direction [duplicate]
(1 answer)
Closed 4 years ago.
On this page (https://nodejs.org/api/modules.html), I found this writing: { }.
const { PI } = Math;
Does it have a particular name, so that I can get more information about it, and especially what does it produce?
Thanks in advance. :D
This is called "destructuring assignment". You can think of it as being equivalent to:
const PI = Math.PI;
…but a little more compact. It really shines when being used to pluck multiple properties off an object:
const { foo, bar, baz } = require('quux').util;
You can also destructure arrays using [ ]:
const [ first, second, third ] = array;
The curly brackets in javascript typically represent an object, but in this case, it is a "destructuring assignment". For example:
const obj = { value: 'hello world' };
const {value} = obj;
console.log(value); // outputs: hello world
Related
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 4 years ago.
I'm new in react and I'm reading some code i found this line of code:
const {intl: { formatMessage }, } = this.context
is a const declaration but i don't understand
I know is JS ES6 but i don't understand what is it for?
How can I check the value of this const?
thanks
As people already answered. This is object destructuring
Simple example: const contact = {name: 'John', email: 'john#doe.com'}
With ES6 you can do const {email} = contact; //email = contact.email
In case you want to name the variable differently, it would be:
const {email: mailbox} = contact //equivalent to mailbox = contact.email;
Back to the original question: {intl: { formatMessage }, } = this.context
=> {formatMessage} = this.context.intl => formatMessage = this.context.intl.formatMessage
The code that you have is, actually a representation of the following code,
const formatMessage = this.context.intl.formatMessage
You can read about object destructuring to know more about it.
This simply means that this.context contains a structure similar to this
this.context = {
intl:{
formatMessage: // This has a value let's say "Hello"
},
//Other key-value pairs could be contained in the context object }
This line of code is a shorthand syntax telling you that only the formatMessage property which can be found inside "intl" should be retrieved from the large object called "this.context"
This question already has answers here:
Object destructuring without var, let or const
(4 answers)
Closed 4 years ago.
So I'm trying to figure out if there's any simple ES6 syntax to do the following:
If I have an object
const config = { foo: null, bar: null }
And I want to assign the values of those properties from another object such as:
const source = { hello: "hello", world: "world", another: "lorem", onemore: "ipsum" }
I want to do something like the following but it doesn't work
{ hello:config.foo, world:config.bar } = source
I know I can do something very close like:
{ hello:foo, world:bar } = source
But this creates new variables foo and bar, whereas I want to assign to existing properties on another object. I'm just curious if there's an ES6 shorthand for this; I don't need help doing this with traditional code, I know there are a dozen ways and I already know most of them.
You're just missing brackets () around the statement.
const config = {};
const source = { hello: "hello", world: "world", another: "lorem", onemore: "ipsum" };
({hello: config.foo, world: config.bar} = source);
console.log(config);
This question already has answers here:
beginner's: const definition in Redux confusing
(1 answer)
What does curly brackets in the `var { ... } = ...` statements do?
(4 answers)
Closed 5 years ago.
What is this code convention in javascript?
const { navigate } = //whatever
As in, what sense does it make. I saw it in RNs React navigation
https://reactnavigation.org/docs/intro/
It's named destructuring. When you have an object and you want to take only a property of that object, you can get only it by using that convention.
let fullName = {
first: 'John',
last: 'Smith'
}
const { first } = fullName;
You can take a look here for more info's
http://wesbos.com/destructuring-renaming/
It's called destructuring
Example:
var myObject = {a: "what", b: "ever"};
const {a} = myObject;
console.log(a); // will give "what"
This question already has answers here:
How to use a variable for a key in a JavaScript object literal?
(16 answers)
Closed 6 years ago.
I'm looking for a simple syntax to allow me to create a new object with one property and set the value of that property. Here's an example. I'd love to be able to do something all on one line.
let parent = 'jackets',
let responses = [{'color':'red', 'size':'medium'}]
let tmp = {}
tmp[parent] = responses
return tmp
Should log:
{
"jackets": [
{
'color':'red',
'size':'medium'
}
]
}
I thought I saw once that this was going to be possible in the es-spec but it doesn't work with the babel-2015 preset.
let jackets = {`${parent}`: responses}
this works for me:
*note: I have the result consoling to the console. Open console to see the results.
const responses = [{'color':'red', 'size':'medium'}]
const jackets = "jackets"
const A = {[jackets]: responses}
console.log(A)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
0Aconst%20A%20%3D%20%7B%5BL%5D%3A%20responses%7D%0Aconsole.log(A)%0A
const jackets = {[parent]: responses}
console.log(jackets)
// gives
{"jackets":[{"color":"red","size":"medium"}]}
noted: other person got in before me.
You will need to use computed property names.
const key = 'foo';
const value = 'bar';
const foobar = {[key]: value}; // {foo: 'bar'}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names
(This works with es2015 Babel preset)
This question already has answers here:
Javascript object bracket notation ({ Navigation } =) on left side of assign
(5 answers)
Closed 7 years ago.
In the React native website, there is the following line of code:
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
In the second line of the example, what is the meaning of the brackets around the TabBarIOS and NavigatorIOS variables?
This is called a destructuring assignment. It's a newer feature being brought in the ECMAScript 6 spec.
Here is an example object:
var test = {
"hello": 1,
"world": 2
}
If we deconstruct it like this:
var {hello, world} = test;
This is the equivalent to doing:
var hello = test.hello,
world = test.world;
But, there is more fun stuff you can do with destructuring assignments...
Lets say we have this object:
var bucket = {
ExampleObject: function(input){
this.input = input.trim();
return this.input;
},
TestingObject: function(example){
this.example = example || {};
console.log(this.example.input);
}
}
Just for the record, I've given the members annoying names... So when destructuring, we can rename them like this:
var {ExampleObject: Example, TestingObject: Test} = bucket;
The binding pattern follows a syntax like so:
{ObjectMemberName}
// Or
{ObjectMemberName: VariableName}
For more information, you can look at the ECMAScript 6 specification draft or the MDN documentation