Destructuring & Restructuring

[00:00:00]
>> Kyle Simpson: Here's another one, and this is a bit more sophisticated. But this is a situation many of you probably have been in at some point or another. You have an object that represents some defaults, like you see here on line 3. And these defaults, in this case this is for AJAX, so I'm providing a default URL, and a default method, and so forth.

[00:00:22]
And I store those in an object because I want to essentially mix those defaults with some settings whenever I make an AJAX column. So here's some settings that I'm going to try to mix in with the defaults. Which means if I provide the URL like I'm doing here, that's gonna override that default URL that's already set.

[00:00:45]
But I'm not providing, for example, the method. You'll notice down here that I'm not providing the method, and so it would pick up of default of method post. So I essentially have these two separate objects that I want to mix together at the call site for my AJAX call.

[00:01:04]
The call site down here, as you can see, the call site is AJAX and I'm using underscore extend. That's the underscore libraries version of that, there's lots of libraries out there that provide an extend method. But they essentially will give you the ability to take several different objects, in this case like defaults and settings, and it first copies the defaults into the object and then it overrides anything that comes through with the settings into the object.

[00:01:34]
Fairly straightforward, and many of you have probably done the default in setting merging objects thing like this, at least on a few occasions, if not more than that. The thing that bugs me about this is, Number 1, this is very imperative, I'm relying upon some libraries definition of how extending works, and it's not terribly obvious what happens with nested objects or nested arrays.

[00:02:01]
I have to go look at the documentation for underscore extend to remember how to overwrite an array element that's nested four levels deep or something. So I thought to myself when I first saw the structuring and I was trying to come up with use cases for it, the destructuring and the defaults that you can do inside of destruction patterns was a great use case for replacing an API driven approach to this to having a declarative approach.

[00:02:27]
And I call this pattern destructuring and restructuring. So first let me show you what it looks like to define a function. We would define a function, in this case for our AJAX options, I define a function called AJAX options. And you'll notice that AJAX options takes an object as its input, and it has a whole set of properties that it expects to see on that object.

[00:02:57]
So it expects the see URLs, and methods, and data, and callbacks. In any place where there's an applicable default I just list it directly in the destructuring pattern. And then headers, and I have another default, and I collect, and I could have even listed a dot dot dot of other properties, in case there were other ones being passed along we could have gathered those.

[00:03:18]
But what I'm basically doing is you pass in an object of your settings, and I'm using the default algorithm to mix in any defaults where your settings are missing, at any level of the declarative structure. And what i end up with then is down at the bottom I have a whole set of individual variables that i need to restructure back into the new merged object.

[00:03:45]
So destructuring happens at the top, that's what all of this stuff is up here, and then down here, we recreate the object structure with all the new and mixed in values, and that's the restructuring part. So in other words, in any place where I'm going to, or would be inclined to use something like underscore extend, I just define a function for that specific purpose.

[00:04:12]
And I give it a good semantic name like, in this case, AJAX options, and instead of maintaining my defaults for my AJAX in a default AJAX options object, I just have those defaults right inside of this function, in its destructuring parameter signature. So you can see very clearly that we default to the URL of this, and we default to the method of post.

[00:04:36]
And I think this more clearly communicates where my defaults are, and also how my mixing will happen, I think it is more declarative approach. So the way you use an AJAX options, is if you need to get out an object that only has the defaults, you just simply call the function without any inputs, and you get back an object with all the defaults in it.

[00:05:02]
If you have a settings object, like I have down here, you pass to AJAX the result of calling AJAX options with your settings object. Your settings object goes in as the input, it mixes with all the defaults, you get a new mixed object back out, and that is now sufficient to pass to your AJAX function.

[00:05:23]
I've started doing this in any place where I used to do something like underscore extend. And I found it to be a lot easier to maintain because I can go to one AJAX options function and see where all my defaults are, and how all of my mixing happens and tweak it if something's not right.

[00:05:41]
So this is yet another sort of more advanced usage of destructuring. Any questions about what we've looked out with destructuring? Reminder, it's gonna take practice, so if it feels too unfamiliar to you, don't worry, once you're practiced with it. And hopefully it won't take you three or four weeks like it did me, hopefully I've taught you well enough that within a few days of practicing that you should start to be able to pick that up