Javascript Destructuring
The quickest way to explain javascript destructuring is with an example.
Consider this object deconstruction:
This syntax translates to:
Consider what it would take to construct the object in Mark A, rather than to deconstruct an existing object?
You may construct an object like so:
You'll notice the syntax for
constructing this payload object
is the exact same syntax for destructuring
it, only we reversed which side of the
assignment payload was on.
Object deconstructors
Next I'll provide a quick overview of different destructuring operations and then we will combine them to get the result above.
Object destructuring
Providing defaults
Renaming destructured properties
Destructuring arrays
Destructuring with spread operators
The spread operator is generally used
to collect varargs, like function(...args) {}
however, in the context of deconstruction,
it collects any elements not explicitly
deconstructed.
For instance, spread deconstruction for an object:
For instance, spread deconstruction for array:
Note: You can see how this is some pretty handy syntactic sugar. You can save a lot of writing time and screen space by using these.
Dynamic property name deconstruction
That's the extent of my off-hand knowledge of very fun javascript deconstruction patterns.
Putting it all together
Initially we considered this example and set out to understand its meaning:
We'll take this section by section
Deconstruct collection property of payload and assign value to local const.
Deconstruct result property.
In each, the right hand side of a destructured property name is the value of that property itself which can then be further deconstructed.
Since result is an array, we can use array
deconstruction as we demonstrated before to
simply get the first result of the result array.
They all effectively do the same thing. / If object destructuring ever looks confusing to you, just remember its the reverse of constructing objects.
Given this, what might code to construct the payload look like?
Take a gander first.
Here's a solution:
Now if we run:
What will the value of data be?
If you've figured that out, you are well on your way to understanding destructuring.
The answer is { rid: 'RID1'}.
Continuing on:
First consider the complimentary object construction:
We see we are defining a payload object with a context property with a hooks property that is an array.
However, perhaps context may be undefined? That's why we provide a default in the destructure.
Consider the following code:
Question: What are the values of hooks
and hooks2?
Take a moment if you want.
Answer: The value of each is [].
Now, we've examined each portion of the deconstruction separately, let's look at it one more time:
Ahhh, there we go. Not so confusing now, is it?
Stay tuned for my next destructuring article where we discuss advanced destructuring.
Post script: as one final test:
What is the value of soSad?
tags: rixfeed dev log programming glossary cbs