Hello there!
For a long time now I've been wanting to take notes on a couple of tricks I currently use at work regarding the concept of Destructur...
For further actions, you may consider blocking this person and/or reporting abuse
You can even do this wizardry:
Yes! Dynamic destructuring!
js wizardry... That's pretty cool I haven't thought of that
It is possible to do it nested???
You mean the following?
Good article, thanks ! :)
But one moment
We have small but important difference between default value of destructed property and
||
In this case runtime compiler (as I know) checks value only on
undefined
and because of this some falsy value likefalse
or''
is not been replaced to default value"bar"
But in other case
||
checks first operand on any possible falsy value and if we have.foo
likenull
then variable will been equals to"bar"
let a = 1;
let b = 2;
[a, b] = [b, a];
=)
Nice, didn't realise one could easily use this to swap variables!
Congrats :)
I should probably tell people not to look at comments before trying 😄
I'd advice against deeply nested destructures like the given example:
There is
classs
there, which could be a typo and it would easily go totally unnoticed.Another point I'd like to make is that it is very hard to read the above. Just do:
Or if you want to allow all objects to miss:
Much easier to understand what is happening. If you want to get multiple items you could use array destructuring:
Although this makes sense only if you have a whole lot of those. This example is good because it retains the normal reading order, while renaming while destructuring fights against the normal reading order. Rename in destructuring should be used sparingly to keep code easy to read.
Hey Vesa, thank you for the suggestion. I appreciate your contribution.
As for your concern on legibility I would take that more as a preference matter, I personally don't see that as a very hard thing to read but I understand your point.
I think the option you gave it's nice if you want things to explicitly fail so you'd be aware of possible typos. In a context in which you don't know what to expect for the structure of the
homoSapiens
object for instance I'd prefer to be safe and set default values for each object being destructured, instead of receiving errors likeCannot read property 'x' of undefined
.And yeah, if you can use lodash then go for it ;)
I think it's by purpose.
class
is a reserved keyword. Although possible to use in some modern browser, I bet IE doesn't like this.I would agree with you. I think that just because you can doesn't necessarily mean that you should. I do appreciate the knowledge sharing though and it is interesting to see the different ways that it's possible to destructure.
You actually don't need dynamic de-structuring to swap values of two variables without using any extra variable:
Thats cool. I didn't know you could do that with the default values. It seems backwards to me though with the variable to assign from on the left of the colon and the variable to assign to on the right.
I found that slightly counterintuitive to start with, too, when you're used to
name = value
. The easiest way I find to remember the order is{ from: to } = obj
. Also, it wouldn't make much sense to use{ to: from } = obj
because you're no longer putting thefrom
in the same position as the key is in the object.A very nice explanation 😁
Just because it makes my inner biologist cringe: could you possible replace 'specie' with 'species' (because that's both the singular and the plural form: en.wiktionary.org/wiki/species)?
Updated! Thanks for that :D
Haha, we had the same idea this week! Nice post :)
3 Powerful Examples of Destructuring Assignment
Laurie ・ Jun 11 ・ 2 min read
Ah yeah! Great post! The more the merrier :)
I mean, it’s clearly one of the best bits of modern ES syntax. Everyone must know!
I don't know if anyone already posted this answer but from what I see must people used objects to do it instead of arrays.
My solution :
Did not know you could destructure an array. Very cool! Thanks for the post.
I have one serious issue with this article -> wanna give it more than one <3s :D Thanks!
Thanks Timea. I'm glad you liked it 🎉
In the complex cases it seems just like another bad spaghetti code.
But in the simple cases it’s pretty usable and clean.