ES6: The Right Parts Advanced Destructuring

Transcript from the "Advanced Destructuring" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: This thing I'm about to show you is basically telling you how to do the exercise, you're gonna wanna pay close attention. This is a huge hint, okay? There's one usage for destructuring that I have found to kinda be useful. And it's in the case wherever I have an object like for example it's maybe you've had this before, I have an object that has some properties in it that represent defaults for some settings, like maybe for an AJAX call or something.

[00:00:32] And then I have a config object where I'm gonna populate only certain things that I wanna set. And what I want is for all the defaults to kind of get mixed in together with the ones that I've set. Anybody in that scenario before? And you probably use some library or frameworks like Nixon or jQuery extend or I think Underscore calls that extend or some utility that mixes objects together in that way, right?

[00:00:56] Probably done that before. The rub is that every framework and utility does it slightly differently. Some of them go from left to right. Some of them for right to left. Some of them have different rules for if the thing is present but if it's an undefined value does it override it?

[00:01:10] If it's not present does it set it? There all these weird things that you have to handle. So if you've got multiples of those utilities hanging around it can be hard to remember exactly what the behavior is of this particular utility in some corner case. The point that I'm making is, that destructuring actually lets us do what I think might be a declarative form of mix in without using any utility at all.

[00:01:35] So I wanna show you that pattern, I call this pattern destructuring and restructuring, okay? So let's imagine, I'm gonna do the left and right thing here. Let's imagine that I have a couple of objects, I have like a defaults object that says I'm gonna pretend in that AJAX scenario.

[00:01:58] Let's say I've got a default object that's got like a method that defaults to post and it's a callback that defaults to some empty function. And let's say it's also got a headers, sub object that has a content type that defaults to text slash play, okay? Just making some stuff up on the fly.

[00:02:31] This is my default object, okay? And then I'm going to somewhere else in my code, create my config object which is gonna add some properties in that don't exist in the defaults. But any place where defaults is there, and it's not in the configs. I want that mixed in there, right?

[00:02:47] So that my compound or my mixed in object has all of that stuff present. So I might make my config object. And that one's going to have a URL.
>> Kyle Simpson: And I will go ahead and set my own callback is equal to foo. And I'll say that I wanna add in headers for x-requested.

[00:03:18] I'm just making stuff up on, I don't know.
>> Kyle Simpson: Okay, so there's my config object. Now I need to mix these two together, be with me. I need to mix these two together. I could use some kind of extend library or utility or something. But I'm gonna show you how we might do this with destructuring.

[00:03:36] So what we could do is, I'm gonna create myself a block, an explicit blocks that I use some block scoping. And I'm gonna use my let declarer, because I'm going to create some temporary variables that I don't want to pollute the outer scope, okay? So my temporary variable is going to come from an object destructuring and what I'm going to be destructuring is the config object.

[00:04:02] Are you with me? So what I'm gonna be doing is I have to know in my head the union of all the properties that I need to account for cuz I don't have a dot dot dot props thing that can collect other ones that I don't know about.

[00:04:14] So in this particular case if I'm doing this with objects I'm going to need to know but I know that the ones that I've written here are the only ones that we care about for this example. So I know I need a URL. Either the URL will be the URL that I've provided from the config URL or it might be a default URL if there was one.

[00:04:35] But you'll notice I didn't specify one. So I'm just gonna list URL. I need to pull that one out. Meaning this is kind of required like you have to give it, okay? I could also pull out the callback but in this case, I do have a default, so I can set the default equal to the defaults.callback.

[00:04:57] And then I'm gonna pull out headers and this one I'm going to go ahead and destructure. So I'm going to say that the content type is going to, that property name isn't a valid variable. So in this case I'm going to need to give it a target. So I'll call it content type and it also has a default which is defaults.header of content-type, okay?

[00:05:32] Now I know because of my screen resolution here things are getting harder to read because I'm in these long lines. So I'm just gonna start breaking some stuff out to help the readability a little bit. Okay, but now I've accounted for that particular header is one. And I also know that it is possible to pass in the x requested with.

[00:05:54] Even though that doesn't have a default I need to map that to something so I'm gonna call that xRequestedWith, okay?
>> Kyle Simpson: And finally I need to account for method. Method is either going to be what I passed in as method or default.method. So I have manually accounted for all the combinations and what I've done is I've taken advantage of the built-in default behavior checking that already exists in destructuring.

[00:06:33] I don't need to reinvent all that logic. It's in JavaScript and I'm taking advantage of it. And I am getting a whole bunch of individual variables. I'm gonna have a method variable, a URL variable, a callback variable, content type xRequestedWith. Those are all gonna be let declare variables that are hidden inside of this outer curly brace go.

[00:06:55] Did I lose you entirely? You tracking with me, okay? So we've broken down our thing and in the process of broken down. We've done the mixing by taking advantage of the default idiom that's built into the structure. The last step is then to restructure, to put all that stuff back into our object.

[00:07:14] So now all I have to do is say config is equal to, and I need to put this stuff back together. Now I need a method property so I can say method: method. We haven't talked about this yet but ES6 also gives us concise properties which means if they're the same we don't need to list them twice so I can just say method.

[00:07:36] And then I need URL and I need callback and I need a headers that's an object that includes content-type and x-requested-with. So now I have restructured that object back. And now the two have been mixed together.
>> Kyle Simpson: So I didn't need a library method and I'm entirely in control at each one of these steps of how that mixing happens.

[00:08:16] I don't have to rely entirely upon the algorithm built in the library. I get to decide for each one of them how that mixing logic to curse but also this what this really starts to point out is that I don't even really need the defaults object anymore. Because wouldn't make a whole lot more sense for me to just go ahead an inline those defaults right here.

[00:08:40]
>> Kyle Simpson: Doesn't that make the code a whole lot more self-explanatory?
>> Kyle Simpson: And this one doesn't have a default.
>> Kyle Simpson: So now we don't even really need to do that whole defaults object mixed together. We're just mixing the default values into our config object using destructuring and restructuring.
>> Kyle Simpson: That's debatable whether or not you think this is a win, but I think not having to worry about some library and some internal quirks and being able to do so with declarative syntax makes the code more self documenting.