Destructuring

[00:00:01]
>> Kyle Simpson: So destructuring, let's dive in and go ahead and loosen up those fingers cuz there's gonna be a lot of typing involved. I'm gonna be showing you some slides here for a few moments, but then I'm gonna be switching into a live coding mode. And when I do this live coding, I really want you to keep up and type along with me.

[00:00:20]
There are so many different variations of the syntax that I would have had to put in, literally, hundreds of slides to show them all. So we're just gonna do it in live coding mode and I'm gonna be using a side by side view in my code editor so that you can see the before and the after of what we're comparing to versus with this syntax.

[00:00:38]
So make sure to get ready to do lots of typing. We'll spend a pretty considerable amount of time on this topic, because I want you to get a sense, or a better sense of confidence that it is not just this weird black box that can't be understood. There are certainly lots of nuances to it, and it's gonna take a while.

[00:00:58]
The first time I tried to learn destructuring, I spent probably three weeks trying to make sense of it. So it is a complex thing. But as I said in the course overview at the beginning, I put this in the course because I so strongly believe that it will pay off so many other places in your code.

[00:01:16]
As you start to get more comfortable with the idea of destructuring, you start finding little places all over that you were doing things in a more manual way and now we can have this declarative destructuring do it in a cleaner way. What does that term even mean, destructuring?

[00:01:30]
I don't know what it officially means, but this is how I like to think of it mentally, is that it is decomposing a structure into its individual parts. First and foremost, you need to understand that the purpose of destructuring as a feature is to assign individual parts from some larger structure.

[00:01:52]
Assign to individual variables, assign to individual properties, whatever, from some larger structure. So we're taking a big thing, and assigning down some or all of its individual parts to some other locations. That's what this feature is for. So let's look at a somewhat common task. Many of you have probably done this before, many of you have probably tried to pull in some big JSON object from an API.

[00:02:18]
Maybe you made a request against the Twitter API or something like that. And you get a big, hairy nested JSON object with objects and inside of them, arrays of other objects that have arrays and properties. And you're 19 levels deep and you're trying to deal with all this crazy data structure.

[00:02:35]
And you really just need a few bits and pieces from this giant structure. It's very common that you'll, for convenience's sake, if for no other reason, go ahead and just reference off one of those deeply nested properties and assign it to some variable. So that you can then use that variable in the rest of the code logic of your program, rather than making a fully qualified reference into that structure over and over and over again, again for convenience sake.

[00:03:02]
So here's an example of doing that, I'm gonna pull back some object from this, get some records API. And you can see that line three and four, I'm basically, pulling out two elements out of an array. And then line six is I'm taking that first element from the array, and I'm looking at some properties on it, like the dot name property.

[00:03:21]
And then line seven, I'm actually not only looking at the dot email property, but if it's not present, I'm providing line nine a default email address. And then I do the same thing for the second. So some of you have probably done code exactly like this or very similar to this and maybe many times, and I certainly have.

[00:03:41]
I've had to consume these big large JSON data structures. And this is functional code in the sense that it mechanically works. But it is certainly far from ideal in terms of communicating the idea, communicating what's happening. It would take you a fair amount of effort to have picked through and figured out what it was doing if I hadn't just described to you.

[00:04:05]
And to get a mental model that, okay, I'm getting back an array of objects that have name and email properties from it. You can pick that out, but it takes a pretty significant amount of brain power to figure that out from code like this. In addition to the reader having to do that sort of work, it's also very common that you might get it wrong or you might miss that there's other bits of the data that you can't even see there.

[00:04:31]
And so it's extremely common that people will also try to document the data structure in some sort of code comment. For example, JSDoc style, documenting what do I expect back as the return value from this API? And you have this very complex code comment that gives all the different properties and their types and things like that.

[00:04:51]
And code comments are certainly very useful, but the big problem with code comments is they get out of date. And if the API changes and your code changes and the comment doesn't, well now you're misleading people. So while we can get the job done and we have for many years, getting the job done this way, it leaves a lot to be desired.

[00:05:11]
And this is the use case. This is why something like destructuring was created. Remember that narrative that we're telling is that JavaScript evolved in the direction of being more declarative. Trying to take the confusing, hard to understand, and hard to optimize code that is very imperative in style, and instead trying to express it in a declarative style.

[00:05:38]
So I'm gonna show you an overview of destructuring, which is this example done with destructuring. And that's gonna be glossing or hand-waving over a whole bunch of details. So don't get intimidated when you see it, it's just gonna gloss over the detail. And then, that's when I'm gonna switch into the live-coding mode, and give you all the little nitty-gritty.

[00:05:57]
We will build ourselves up, first understanding arrays, and then objects, and all of that. So just hang on with me, if you're confused by the next slide, don't worry. We'll explain it all. But this example of highly imperative can be done with this declarative destructuring syntax like this.

[00:06:19]
>> Kyle Simpson: So just taking a moment to let that kind of sink in, let me highlight a couple of things that you should pay attention to. Number one, on the left hand side of our equal sign, that is lines one through ten there, we have what looks like essentially a JSON object.

[00:06:37]
We have what looks like an array and what looks like inside of that array, a couple of objects and what looks like properties, inside of those objects. But that is not what this is. This is not an array of objects. Because it's on the left hand side of an equals, it's not a value at all.

[00:06:54]
Because it's on the left hand side of the equals, its actually a pattern. It is a syntax that is describing the value that is expected from the right-hand side, which is where we call the getSomeRecords() API.
>> Kyle Simpson: A pattern to describe what kind of value we're expecting to get.

[00:07:21]
And the purpose of that pattern again, is not just to describe it, it's not just for code documentation. The real purpose for describing it is so that we can assign those individual values off as we need them. So in that pattern on Line 3, you'll notice that I'm saying, there is going to be a name property and then I have a : firstName.

[00:07:46]
That is essentially saying, go make me a variable called firstName, that has the value that is in this particular location of the data structure, which is the name property of the first object in an array. It describes to JavaScript declaratively how it should break down that structure and make individual assignments for you.

[00:08:11]
And you'll notice on line four that I include an equals clause there. That's the so-called default value expression. And that default value expression says, if there's not an email property present, go ahead and use this backup default value to assign to a variable called first email.
>> Kyle Simpson: Same thing on the second object, we get a second name, and a second email, or a fallback to the default email value.

[00:08:44]
>> Kyle Simpson: So at a very high level glance, that's what you can expect out of destructuring, is any place where you would be trying to break down and assign off pieces from some larger data structure, a destructuring pattern can do that. And it doesn't always have to be this big hairy JSON object.

[00:09:01]
Sometimes it can just be an API that returns you a two-element array, and you only care about the element at position one in the array. Where you would normally do is assign the array to a temporary variable and then access temporary variable, position one. That's the imperative approach.

[00:09:23]
The destructuring approach could say, I'm wanna give me the array this destructuring pattern for this assignment and then I'm going to leave the first element entry blank. And then only name the second entry, that's the only one that I wanna sign off, okay. So the other take-away here is that destructuring does not have to account for the, the pattern does not have to account for the entirety of the value.

[00:09:47]
The pattern only has to account for the part of the value that you care about at that moment. It does not have to fully describe it. In this case, our array could have returned back hundreds of objects and we're saying we only care about the first two. And also, there could be lots of other properties on those objects and we're saying we only care about the name and email properties.

[00:10:10]
So this pattern is describing potentially, either the entire structure or just a subset of it, of the necessary structural parts to get at the things that we care about.
>> Kyle Simpson: The other takeaway here is that essentially, this code in its declarative nature, is self documenting, because in a sense we are documenting with syntax what we expect the value returned from the API call.

[00:10:39]
It would be rather duplicative to put a JS dot comment, unless there was a significant amount of other information that we weren't putting in the destructuring pattern. But then you could ask, why would that information be useful in a code comment anyway. Wouldn't it be better for the reader only to know about the things that are needed at that moment, as opposed to a complete dictionary of every possible property that could be returned?

[00:11:03]
So I think that's where destructuring starts to shine, is when we find these little places and even these big places, and we declare a pattern for how we want that breakdown to happen and let JavaScript take care of the details. Now there's lots of detail behind this, and to get into all of that detail, we need to switch into my code editor and dive in.

[00:11:29]
And we're gonna do a lot of live coding, so again, make sure you have your code editor up and ready to type along with me, as we dive in much deeper into how destructuring syntax works.