javascript: meaning of curly brace between variable name

Question

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!

Answer 1

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?

Answer 2

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.

Answer 3

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 .