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.