Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35951 > unrolled thread

let and {}

Back to article view | Back to comp.lang.javascript

Contents

  let and {} Luca <luca@please.nospam.it> - 2019-01-03 10:46 -0500
    Re: let and {} Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-01-03 16:31 +0000
      Re: let and {} Luca <please_no@spam.it> - 2019-01-03 13:13 -0500
        Re: let and {} Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-01-03 20:07 +0000
          Re: let and {} Luca <luca@please.nospam.it> - 2019-01-03 23:45 -0500
    Re: let and {} Martin Honnen <martin.honnen@gmx.de> - 2019-01-03 17:32 +0100
      Re: let and {} Luca <please_no@spam.it> - 2019-01-03 13:14 -0500

#35951 — let and {}

I am sure this is explained in multiple places, but the amount of 
novelties that have been introduced since I last looked at JS seriously 
(many many years ago) is confusing me endlessly and I am no longer sure 
about what I know and what I don't know.

Please bear with me if I ask this honorable forum:

Inside a class:

         this.state = {
             gameState: "ready",
             wrongGuesses: [],
             correctGuesses: []
         };

            :

         let { wrongGuesses, correctGuesses } = this.state;

Questions:

0) what's the meaning of curly braces there?

1) why does this work? i.e. why are wrongGuesses and correctGuesses 
being assigned correctly?

2) what's the scope of wrongGuesses and correctGuesses?

3) why isn't this.gameState "interfering" with what needs to be asigned 
to what?

4) is this an ES5 or ES6 feature?

Thanks a lot

[toc] | [next] | [standalone]

#35952

On 2019-01-03, Luca <luca@please.nospam.it> wrote:
>          let { wrongGuesses, correctGuesses } = this.state;
>
> Questions:
>
> 0) what's the meaning of curly braces there?

It's called "destructuring", the above is basically the same as:

    let wrongGuesses = this.state.wrongGuesses
    let correctGuesses = this.state.correctGuesses

Without the curly braces, it would be the same as:

    let wrongGuesses
    let correctGuesses = this.state

> 1) why does this work? i.e. why are wrongGuesses and correctGuesses 
> being assigned correctly?

Not sure I understand that question.

> 2) what's the scope of wrongGuesses and correctGuesses?

The scope of 'let' variables is the block in which they are declared.
This is different from 'var' variables, the scope of which is the
entire function in which they are declared (or global if they are
declared outside a function).

> 3) why isn't this.gameState "interfering" with what needs to be asigned 
> to what?

I don't understand this question either.

> 4) is this an ES5 or ES6 feature?

ES6.

[toc] | [prev] | [next] | [standalone]

#35954

On 1/3/2019 11:31 AM, Jon Ribbens wrote:

> 
>> 1) why does this work? i.e. why are wrongGuesses and correctGuesses
>> being assigned correctly?
> 
> Not sure I understand that question.

It seems to me that the only way this works is if the name of the 
variable matters!

in other words, would

let { wrongGuesses2, correctGuesses } = this.state;

still work?

>> 3) why isn't this.gameState "interfering" with what needs to be asigned
>> to what?
> 
> I don't understand this question either.

Same doubt as above. How does the JavaScript interpreter know that 
wrongGuess should not be assigned to gameState?

Thanks a lot for your answers. Very instructive

[toc] | [prev] | [next] | [standalone]

#35956

On 2019-01-03, Luca <please_no@spam.it> wrote:
> On 1/3/2019 11:31 AM, Jon Ribbens wrote:
>>> 1) why does this work? i.e. why are wrongGuesses and correctGuesses
>>> being assigned correctly?
>> 
>> Not sure I understand that question.
>
> It seems to me that the only way this works is if the name of the 
> variable matters!

Oh, yes. This is a special abbreviated syntax they added that does
rely on the assumption that the name of the variable matches the
object property you are trying to access. This is often a reasonable
assumption so it's a useful shortcut.

You can actually get it to work if the name does not match, but it's
a bit more verbose:

    let { wrongGuesses: wrongGuesses2, correctGuesses } = this.state

i.e. 'object property name' : 'variable name'.

[toc] | [prev] | [next] | [standalone]

#35957

Thank you very much, Jon. Very instructive

On 1/3/2019 3:07 PM, Jon Ribbens wrote:

> Oh, yes. This is a special abbreviated syntax they added that does
> rely on the assumption that the name of the variable matches the
> object property you are trying to access. This is often a reasonable
> assumption so it's a useful shortcut.
> 
> You can actually get it to work if the name does not match, but it's
> a bit more verbose:
> 
>      let { wrongGuesses: wrongGuesses2, correctGuesses } = this.state
> 
> i.e. 'object property name' : 'variable name'.
> 

[toc] | [prev] | [next] | [standalone]

#35953

On 03.01.2019 16:46, Luca wrote:
ease bear with me if I ask this honorable forum:
> 
> Inside a class:
> 
>          this.state = {
>              gameState: "ready",
>              wrongGuesses: [],
>              correctGuesses: []
>          };
> 
>             :
> 
>          let { wrongGuesses, correctGuesses } = this.state;
> 
> Questions:
> 
> 0) what's the meaning of curly braces there?
> 
> 1) why does this work? i.e. why are wrongGuesses and correctGuesses 
> being assigned correctly?
> 
> 2) what's the scope of wrongGuesses and correctGuesses?
> 
> 3) why isn't this.gameState "interfering" with what needs to be asigned 
> to what?
> 
> 4) is this an ES5 or ES6 feature?

See whether 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring 
and 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let 
helps.

[toc] | [prev] | [next] | [standalone]

#35955

On 1/3/2019 11:32 AM, Martin Honnen wrote:
 >
 > See whether
 > 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring 

 > and
 > 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let 

 > helps.

Thank you!

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web