CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Zennichimaro
Zennichimaro

Reputation: 5306

javascript: meaning of curly brace between variable name

I am extremely weak with javascript due to its lax syntax but very punishing special characters meaning.

In react-native-navigation tutorial there is this snippet

static navigationOptions = ({ navigation }) => {
   const {state, setParams} = navigation;
   const isInfo = state.params.mode === 'info';
   const {user} = state.params;
   return {
     title: isInfo ? `${user}'s Contact Info` : `Chat with 
 ${state.params.user}`,
     headerRight: (
       <Button
         title={isInfo ? 'Done' : `${user}'s info`}
         onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
       />
     ),
   };
 };

Originally, I mistakenly type the third line as this: const {isInfo} = state.params.mode === 'info';

and my code doesn't work.

What is the difference with: const isInfo = state.params.mode === 'info';

since the next line, there is curly brace wrapping {user}

it is very confusing for me, but these kind of minor thing is notoriously difficult to Google, so sorry and thanks in advance!

Upvotes: 2

Views: 2572

Answers (3)

bashleigh
bashleigh

Reputation: 9314

Essentially curly braces like you've mentioned are Objects in javascript.

So making something like this in javascript 

const user = {
    name: 'bob',
    age: 23,
};

Is making a user Object which you can use like this: user.name which will return bob.

With ES6 you're capable of making Objects from other Objects. 

const {user} = state.params;
//user will be state.params.user

The above is basically pulling the property user from the object state.params into a new variable. Really all they're doing is making it so you don't have to write state.params.user each time and rather you can write user.

There's some other cool stuff you can do with this above technique. You can 'merge' arrays and objects into new constants which is pretty cool. 

const test = {
    ...user,
    anotherProperty: 'value',
};

With react and redux (if you're using it) you'll see a lot of this: Object.assign({}, state, {}); which is used to create a new object with the previous properties of the state overwritten with the new state (because redux requires a new object). This is kind of the same as using {...state, ...newState}.

Please someone remind me what this ...Object method is called?

This line const isInfo = state.params.mode === 'info'; is a shorthand for declaring a bool. isInfo will be either true or false depending on whether state.params.mode === 'info'.

To translate the above into C++ for you

if (state.params.mode === 'info') {
    bool isInfo = true;
else {
    bool isInfo = false;
}

I can't remember if there is a similar Object array in C++ as in JavaScript bit think of Objects in JavaScript as Arrays with defined keys. That way the above {...state, ...newState} is like an 'override' of keys. So

int y = [1,2,3];
int x = [3,2,1];


for (i=0;i<=2;i++) {
    y[i] = x[i];
}

Something like that I think?

Upvotes: 12

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

This is the ES6 syntax, The expression const {user} = state.params; is equal to const user = state.params.user; and the const {isInfo} = state.params.mode === 'info'; will result in {isInfo: undefined}. For more information you can see here.

Upvotes: 4

bennygenel
bennygenel

Reputation: 24660

In ES6 you can deconstruct objects into different variables. You can read more about it here

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Upvotes: 4

Related Questions