Refactoring Code Using Destructuring

[00:00:00]
>> Kyle Simpson: Let's take a look at destructuring. I'm gonna start with this left and right layout. And on the left-hand side, I'm gonna try to keep up at least as much as I can throughout this discussion. I'm gonna try to have on the left-hand side, the old pre-destructuring equivalent.

[00:00:16]
And then on the right-hand side I'll show you the destructuring equivalent. And the reason for that is I want you to get a sense that destructuring has a processing model to it. I want you to be able to think like the destructuring, because that will help you work through the various syntactic differences.

[00:00:33]
If you can always think about, what would the equivalent have been if I wasn't using destructuring? That will help you predict the outcomes. So I'm gonna try to show you those examples side by side so that you can learn what it is replacing. It will also help you when you're looking at pattern matching through your code to look for places to replace with destructuring.

[00:00:52]
Now you'll be able to identify those a little more clearly. So let's imagine that we have a function that is gonna return us some values. And since I'm not a terribly creative person, I'm just gonna have it return us some numbers, okay? It's gonna return us some numbers.

[00:01:08]
And I would normally be grabbing this data and assigning it off into a variable that I didn't particularly care about, like tmp.
>> Kyle Simpson: And then I would be assigning off the individual element values into variables that I do care about. Like for example I might say, first = temp [0], and second = temp [1], and third = temp [2].

[00:01:41]
So first would be value 1, second would be value 2 and third would be value 3. So that's the imperative approach, what's the destructuring approach? Same data function that returns us an array of 1, 2, 3.
>> Kyle Simpson: Now we don't really need to
>> Kyle Simpson: Make a temporary variable to hold it.

[00:02:13]
Because in the previous example we didn't even really care about temporary variable. We don't need a temporary variable, so we're just gonna immediately say here's the pattern of what I'm expecting to get back. So I'm gonna declare here, but this is not actually related to declarations, this is related to assignment.

[00:02:30]
Here I'm just making them at the same time as assigning them. So I’m going to say a var, and then I’m gonna open up a square brackets. And then on the right-hand side I'm gonna call data. So that square bracket is my pattern, because it’s on the left-hand side of an equals.

[00:02:48]
For readability's sake, I'm gonna go ahead and keep these on multiple lines, with nesting, and indentation, and so forth. And I'm gonna strongly recommend that you do the same. I've seen a lot of examples of people using destructuring, and they put it all on one line. And then the line is 15 miles long, and it completely defeats the whole purpose of having declarative, readable code.

[00:03:10]
If our purpose is to make readable code, use things like new lines and white space to make them more readable. They are free and they are helpful. So I'm gonna then say, in that first position of the array I'm expecting whatever that value is to end up getting assigned to the first variable.

[00:03:28]
And then the second position of the array, index 1, assign it to a variable called second. And the value in position three to the third element, assign it to the variable third.
>> Kyle Simpson: So that is the equivalent destructuring pattern, where we did it imperatively on the left-hand side.

[00:03:55]
If I were to take off the number 3 from this left-hand side, what would we expect the third variable here to have in it?
>> Kyle Simpson: We're referencing index 2 of an array that only has an index of zero and one. What would we expect this to give us?

[00:04:18]
>> Class: Undefined?
>> Kyle Simpson: Undefined, right. That is exactly the same thing as what we're going to get out of destructuring. If our destructuring pattern indicates something that doesn't exist, then it just gets assigned undefined.
>> Kyle Simpson: What would happen if I had a value here and then I had an extra value, and we didn't account for it on the left-hand side?

[00:04:43]
>> Kyle Simpson: Nothing, just gets ignored. Exactly the same thing is true here. We have these numbers. The number 1, 2 and 3 are accounted for, the number 4 is not accounted for. No big deal, it just gets ignored.
>> Kyle Simpson: What if it was possible for one of these positions to come back as undefined?

[00:05:08]
>> Kyle Simpson: Well then, second would be undefined, right? Even though that index exists, the value is undefined. I could type undefined there or not type undefined, but either way we're expecting that that value is undefined. So what would happen with the second variable is that it would just be holding the undefined variable, the undefined value.

[00:05:31]
The same is true over here. But what happens if I don't want it to be undefined? If it's undefined I want to apply some sort of default. Well the way we would typically define a default would be to use a ternary operator. So we'd say something like temp of 1 not equal to undefined, and then we would say temp of 1

[00:05:56]
>> Kyle Simpson: Or, and then we'd provide a default back up for it, like the number 10.
>> Kyle Simpson: So what is the equivalent of doing this ternary for our second? The equivalent is to use the default value expression.
>> Kyle Simpson: And that applies to any of those element positions. You can apply a default to any of those element positions.

[00:06:30]
It is important to note that exactly like over here, if I used null what would the variable second be?
>> Class: Null.
>> Kyle Simpson: It would be null, not the value 10. It would be null because null is not undefined in a strict equal sense. So it's important to understand that the default value expression only picks up when there's an undefined.

[00:06:58]
It just doesn't kick in in the place where there's a null or an empty string or a false or something. So it is not a loose quality check with undefined, it's a strict quality check with undefined.
>> Kyle Simpson: Here, the same thing, second would be null not 10.
>> Kyle Simpson: Okay, what if this array, let's go back to the case where it's got some values in it.

[00:07:29]
What is this array had several other values in it and I couldn't predict how many values it had in it? But I basically just kind of wanted all of them to have to be collected up into an array. So I didn't have any defaults anymore, we'll go back to this.

[00:07:46]
And what if we just had those values, like in this case, the four and the five? I don't know and I can't even predict how many there are, but I'd like to collect all of them up into an array. What would that look like? Well, on the left-hand side, we could have done that imperatively, by creating a variable called fourth.

[00:08:04]
And we would need to take a slice of this array, starting at position 3. So we'd have to say tmp.slice, starting at position 3. And now fourth would be the array 4 and 5.
>> Kyle Simpson: And if had 6 and 7 and 8 it would include those as well.

[00:08:24]
In our destructuring patterns, similar to our function signatures, we can use the gather syntax. It's sometimes referred to as the rest syntax. We can use the dot dot dot operator to gather everything else up into an array called fourth.