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

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

let syntax

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

Contents

  let syntax Andrew Poulos <ap_prog@hotmail.com> - 2020-06-15 10:46 +1000
    Re: let syntax James Kirk <noneya.invalid@gmail.com> - 2020-06-14 21:26 -0400
      Re: let syntax Andrew Poulos <ap_prog@hotmail.com> - 2020-06-15 13:25 +1000
        Re: let syntax James Kirk <noneya.invalid@gmail.com> - 2020-06-15 00:06 -0400
        Re: let syntax Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-06-16 21:23 +0200
          Re: let syntax Andrew Poulos <ap_prog@hotmail.com> - 2020-06-17 10:24 +1000
          Re: let syntax Julio Di Egidio <julio@diegidio.name> - 2020-06-16 21:19 -0700

#38465 — let syntax

I asked a question on the CSS group and an answer involved using this 
JavaScript:

function move(e) {
   let { target:el } = e;

   if (el.nextElementSibling){
     el.parentNode.appendChild(el);
   }
}
document.addEventListener('DOMContentLoaded',() => {
   let spans = document.querySelectorAll('div > span');
   spans.forEach((elm) => {
     elm.addEventListener('click', move);
   });
});

I don't understand how the first line in "move" works. It seems that
   let { target:el } = e;
is equivalent to
   let el = e.target;

but how?

Andrew Poulos

[toc] | [next] | [standalone]

#38466

In Message: <Gt-dnYgvE8ieWHvDnZ2dnUU7-QnNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

> I asked a question on the CSS group and an answer involved using
> this JavaScript:

> function move(e) {
>   let { target:el } = e;

>   if (el.nextElementSibling){
>     el.parentNode.appendChild(el);
>   }
> }
> document.addEventListener('DOMContentLoaded',() => {
>   let spans = document.querySelectorAll('div > span');
>   spans.forEach((elm) => {
>     elm.addEventListener('click', move);
>   });
> });

> I don't understand how the first line in "move" works. It seems that
>   let { target:el } = e;
> is equivalent to
>   let el = e.target;

> but how?

Destructuring assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Assigning to new variable names

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names



-- 
James Kirk

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

#38467

On 15/06/2020 11:26 am, James Kirk wrote:
> In Message: <Gt-dnYgvE8ieWHvDnZ2dnUU7-QnNnZ2d@westnet.com.au>
> Andrew Poulos <ap_prog@hotmail.com> wrote:
> 
>> I asked a question on the CSS group and an answer involved using
>> this JavaScript:
> 
>> function move(e) {
>>    let { target:el } = e;
> 
>>    if (el.nextElementSibling){
>>      el.parentNode.appendChild(el);
>>    }
>> }
>> document.addEventListener('DOMContentLoaded',() => {
>>    let spans = document.querySelectorAll('div > span');
>>    spans.forEach((elm) => {
>>      elm.addEventListener('click', move);
>>    });
>> });
> 
>> I don't understand how the first line in "move" works. It seems that
>>    let { target:el } = e;
>> is equivalent to
>>    let el = e.target;
> 
>> but how?
> 
> Destructuring assignment
> 
> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Cool, a whole new area I knew nothing about!

In this case, why would choose one rather than the other?

Andrew Poulos

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

#38468

In Message: <sa2dndANOaaDd3vDnZ2dnUU7-IfNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

> On 15/06/2020 11:26 am, James Kirk wrote:

>> In Message: <Gt-dnYgvE8ieWHvDnZ2dnUU7-QnNnZ2d@westnet.com.au>
>> Andrew Poulos <ap_prog@hotmail.com> wrote:

[snip]

>>> let { target:el } = e;  

[snip]

>>> I don't understand how the first line in "move" works. It seems
>>> that 

>>> let { target:el } = e;
>>> is equivalent to
>>> let el = e.target;  

>>> but how?  

>> Destructuring assignment

>> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

> Cool, a whole new area I knew nothing about!

> In this case, why would choose one rather than the other?


personal preference, readability, modifications … no reason not to
use destructuring assignment

for example if the event type would be needed at a later time.

let { target:el, type:evtype } = e;


-- 
James Kirk

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

#38469

Andrew Poulos wrote:

> On 15/06/2020 11:26 am, James Kirk wrote:
>> Andrew Poulos <ap_prog@hotmail.com> wrote:
>>> function move(e) {
>>>    let { target:el } = e;
>> 
>>>    if (el.nextElementSibling){
>>>      el.parentNode.appendChild(el);
>>>    }
>>> }
>>> […]
>> 
>>> I don't understand how the first line in "move" works. It seems that
>>>    let { target:el } = e;
>>> is equivalent to
>>>    let el = e.target;
>> 
>>> but how?
>> 
>> Destructuring assignment
>> 
>> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
> 
> Cool, a whole new area I knew nothing about!
> 
> In this case, why would choose one rather than the other?

DRY.  If you wanted to extract other properties, you just have to expand the 
destructuring assignment instead of writing one more assignment and 
duplicating the object reference on the right-hand side of the “=”.

Personally I find this particular syntax more confusing than helpful because 
what is being assigned *to* is now unexpectedly on the *right*-hand side of 
what can reasonably construed to be an assignment (“…: …”).

Compare: <https://github.com/airbnb/javascript#destructuring>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#38470

On 17/06/2020 5:23 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> On 15/06/2020 11:26 am, James Kirk wrote:
>>> Andrew Poulos <ap_prog@hotmail.com> wrote:
>>>> function move(e) {
>>>>     let { target:el } = e;
>>>
>>>>     if (el.nextElementSibling){
>>>>       el.parentNode.appendChild(el);
>>>>     }
>>>> }
>>>> […]
>>>
>>>> I don't understand how the first line in "move" works. It seems that
>>>>     let { target:el } = e;
>>>> is equivalent to
>>>>     let el = e.target;
>>>
>>>> but how?
>>>
>>> Destructuring assignment
>>>
>>> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
>>
>> Cool, a whole new area I knew nothing about!
>>
>> In this case, why would choose one rather than the other?
> 
> DRY.  If you wanted to extract other properties, you just have to expand the
> destructuring assignment instead of writing one more assignment and
> duplicating the object reference on the right-hand side of the “=”.
> 
> Personally I find this particular syntax more confusing than helpful because
> what is being assigned *to* is now unexpectedly on the *right*-hand side of
> what can reasonably construed to be an assignment (“…: …”).

Just reading about it, it seems slightly confusing but the benefits seem 
apparent.

> Compare: <https://github.com/airbnb/javascript#destructuring>

Yes, I've been caught in just the way it describes.

Andrew Poulos

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

#38471

On Tuesday, 16 June 2020 21:23:40 UTC+2, Thomas 'PointedEars' Lahn  wrote:

> Compare: <https://github.com/airbnb/javascript#destructuring>

I wouldn't suggest that to my worst enemy.  Those micro-optimisations are
*completely pointless*, that's the stuff a compiler reshuffles and optimises
away in any case, all the more so for high level languages.  The number one
and almost sole criterion for code quality is *readability*: it is what
brings not just maintainability but usually and automagically also efficiency,
while there are very few places where optimising is even appropriate, and
these are to be measured carefully as they rather impinge on robustness and
maintainability, and certainly nothing to do not these utterly pointless
micro-optimisations.

Julio

[toc] | [prev] | [standalone]

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

csiph-web