Why code inside brackets work in typescript / es6?

Question

i begin telling you that this code work, bu i can not find documentation about the use of code inside {}. The useStore is only a hooks in react

//React ES6+ Typescript

const MyComp= (props: MyCompProps) => {
let state1 = null;
let action1 = null;
{
    const {state, actions} = useStore1(mapState1,FnActions1);
    state1 = state;
    action1 = actions;
}
let state2 = null;
let action2 = null;
{
    const {state, actions} = useStore2(mapState2,FnActions2);
    state2 = state;
    action2 = actions;
}
.....
}

in orginal my code was:

const {state1, action1} = useStore1(mapState1,FnActions1);
const {state2 , action2 } =  useStore2(mapState2,FnActions2);

but typescript noted me a error Error:(57, 26) TS2459: Type 'StoreProps<{ error: any; loading: any; isFetching: any; } Pr...' has no property 'actions' and no string index signature. but using the first pasted code, work fine. But why?where i can find documentation about this use of code inside {...} ?

Does this answer your question? [What do {curly braces} around javascript variable name mean](https://stackoverflow.com/questions/25187903/what-do-curly-braces-around-javascript-variable-name-mean) — Justinas, May 21 '20 at 07:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

This is Object Destructuring

Why this works?

const {state, actions} = useStore1(mapState1,FnActions1);

This works because useStore1(...) is returning a object which has two properties with exact names "state", "actions" inside it. So javascript is able to destructure the object and create two const for you.

Why this doesn't works

const {state1, action1} = useStore1(mapState1,FnActions1);

It tries to find "state1" and "action1" in the returned object {state, action} and thus, it's not able to find these fields. Hence it's throwing the error.

More On destructing in JS - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

thanks, also the answer of @Mario vernari was correct, but you have explained me. — lbottoni, May 21 '20 at 08:24

score 1 · Answer 2 · answered May 21 '20 at 07:53

1

You can rewrite your second snippet as follows:

const {state:state1, actions:action1} = useStore1(mapState1,FnActions1);
const {state:state2 , actions:action2 } =  useStore2(mapState2,FnActions2);

which basically destructures and creates an alias for the fields, all at once.

answered May 21 '20 at 07:53

Mario Vernari

6,649
1
32
44

Thanks Mario, your answer it's correct but is without "why" for me important to undestand – lbottoni May 21 '20 at 08:25

Wiyanto Tan · Answer 3 · 2020-05-21T07:47:07.760

{} Mark is common in programming language. It help you scoping the code within the block {}. Any variables defined within the block will be available just in that block.

reference: https://en.wikibooks.org/wiki/Introduction_to_Programming_Languages/Scoping_with_Blocks

I think your useStore1 and useStore2 return an object with structured like :

const useStore1 = (mapState, fnAction) => {
   // ... logic
   return {
      state, 
      actions
   }
}

Call to this useStore1 function will also return {state, action}. So to get the value you have to use

const {state, action} = useStore1(mapState1,FnActions1);

But your second pasted code, it write const {state1, action1}. While the useState1 return {state, action}. Thats why your second pasted code, will produced an error.

The first pasted code not produced an error because of the block scoped code.

{
const {state, action} = useState1(...);
// variable state and action just available within this block.
}

Another approach is:

const stateReturn1 = useStore1(mapState1,FnActions1);
const stateReturn2 = useStore2(mapState2,FnActions2); 
state1 = stateReturn1.state;
action1 = stateReturn1.actions;
state2 = stateReturn2.state;
action2 = stateReturn2.actions;

{} are block delimiter, but are also used for object destructuring. With your code, you declare two times the same const. — Stoic Lion, May 21 '20 at 07:39

Why code inside brackets work in typescript / es6?

3 Answers3

This is Object Destructuring

Why this works?

Why this doesn't works