Destructuring Objects & Arrays

[00:00:00]
>> So before we go on and talk about places where we can use array, wanna talk about another fancy piece of syntax. Sorry, this is maybe a little tricky to see, but what we're gonna talk about now is another piece of fancy JavaScript syntax called destructuring. So we've seen some fancy syntax already, right?

[00:00:16]
We've seen arrow functions, that's fancy. We've seen conditional operators with the question mark, and the colon, that's fancy. We've seen the backticks with the dollar sign curly braces, the string templates. JavaScript has a lot of syntax. Unlike maybe some other languages you've learned where let's say, parentheses are the entire language, [LAUGH] like closure script, for example, maybe if you've seen those.

[00:00:42]
JavaScript has a lot of different things that we can do with, for example, curly braces. And so what what destructuring is, is it's a syntax that we can use to break down an object like a unicorn, for example, into the parts that make it up, like a horn, a tail and a body.

[00:01:01]
And this is a cute illustration of destructuring from my friend Sarah. Okay, so destructuring is essentially, we can think of it as a fancy way of declaring multiple variables at once. And/or a way you can think about is like extracting the properties from an object and making them variables in our current scope.

[00:01:29]
So for example, remember our spices objects, each spiceGirls object had a name property and a nickname property. So I don't think I have my spices anymore, but let me go make it. So we had clear we had got something like spices equals and then an array of objects that looked like name Emma, nickname Babe and so on and so forth.

[00:02:01]
I just need one for right now. So if I use this weird syntax that sort of looks like an object on the left hand side of an equals assignment operator. This right here, it's not an object, it's sort of an indication of the shape of an object, the properties of an object.

[00:02:28]
And what this does is it's going to essentially say, all in this one line, hey, JavaScript take the object at index 0 in the spices array. Pull out the value of its name property and assign that to a new variable name. Pull out the value of its nickname property and assign that to a new variable nickname.

[00:02:57]
So, when I run this, and now I ask for name, name is now the val pointing to the value from within that object. And similarly, so is nicknamed pointing to the corresponding value there? Now, it might seem like a little strange to do it this way, but this ends up being handy when you have, for example, an object with lots of different properties and maybe you only care about one of them or a couple of them, let's say.

[00:03:37]
And you say, I don't actually wanna, capture the whole object as, spiceGirl and then do spiceGirl.name equal spiceGirls name. I don't want to have to do all of that work of getting the object and then using dots to get into its properties, this is just basically a shorthand for all of that.

[00:03:56]
So what we can do, all right, well I don't have a spices to here, but what we can do is say, I don't know, I'll just call this Nick. And I'm just gonna keep working with 0 cuz I only have one spice at the moment, everyone else has left the group.

[00:04:12]
[LAUGH] What I can do is, sorry, I can't say Nick there, I can just say nickname because the name of the property here can be then essentially pulled out into its own variable. Now here it's probably not gonna like it cuz I already declared a nickname. But what I can do is just reassign to that value, I'm sorry, to that variable.

[00:04:39]
No, I can't, no I can't, I need the let. Let me reload and copy my thing here, sorry, okay? All right, start over. All right, so now, if I to let, just nickname is all that I care about equals spices[0]. I have sort of ignored the name, so right now if I reference nickname that works.

[00:05:10]
But name is, I don't know what that is, that might be something old. But essentially what it's doing is just saying, hey, JavaScript I don't care about the other properties on this object, I just care about that nickname property within the object. Okay, so destructuring lets us kind of quickly only grab certain properties we care about out of an object.

[00:05:35]
Question.
>> Do the variables inside of the curly braces need to match the order that they are in the array.
>> Great question. Let's find out. Variables, what order they are in? Are they in orders? Let's find out. Okay, so if I do let nickname, name in my curlies equal spices[0].

[00:06:03]
Nickname now is still Baby and name is still Emma. No, the order does not matter. Actually, in JavaScript object properties are not ordered. Unlike arrays, where items are ordered, object properties are not guaranteed to be in a particular order in JavaScript even though usually, we will see them kinda logged out or printed out by the browser's kind of viewer here in the order that we declared them.

[00:06:33]
There is not actually a concept of ordering to object properties in JavaScript. So as far as destructuring is concerned, it does not know or care what order they were originally in. Nor does it know or care what order you put them in in your destructuring assignment because all it cares about is that, it has to assign a new variable to each of those things.

[00:06:56]
And similarly in our scope, like variables don't have an order. Similarly within an object properties don't have an order. But great point, great question. So no order does not matter. You can write them in whatever order feels good to you. Okay, another fun thing is that we can destructure arrays too.

[00:07:19]
So for example, in our original spices array, whenever arrays do have an order, the objects were structured so that it was like the baby spice object, the ginger spice object and so on and so forth. And what I can do is use the square brackets syntax to assign a variable name to each element in order in that array.

[00:07:41]
So let's take an example with, I don't know, we can just use numbers for now. One, two, and three could become names now for an array of numbers like this. So that if I asked for one, now I get the number 1, 3, 3, and so on. And in this case, order does matter, right?

[00:08:08]
So if I have six, five, four for a new array that has 4, 5, 6, JavaScript does not have any property names to go off of here in an array, all it has to go off of is the order, all ut has to off of is the index, the numerical indices and the order that things are.

[00:08:28]
So it's just gonna map the first to the first, and the second to the second, and the third to the third. And so now we're gonna have confusingly 6 be 4 and 4 be 6. So order does matter when we're just structuring arrays, but it doesn't add over to structuring objects.

[00:08:48]
But the fun thing is that when we're destructuring arrays, we can ignore any extra values that we don't need. So we can, if we only care about the first couple of things in my array, I can just ignore the rest of the array and it won't be captured.

[00:09:06]
So for example I can do, let, I don't know 10, 20, Be on the left hand side of a much longer array. And now 10 and 20 are the first two things, if I can spell them, but 30 and 40 just got ignored, they didn't get pulled out into our destructuring.

[00:09:34]
And what's actually fun is that I can use commas if I wanna skip things in the array. So if I can say, I don't care about the first thing, I don't care about the second thing, I care about 30. And then I don't care about the fourth thing.

[00:09:53]
This should, if I haven't typed anything wrong, pull out the third thing in the array here, because of my two commas. So this can be a handy way, again, to just like grab out only a certain amount of information. I will say that though we can do this with arrays, it's really handy.

[00:10:14]
I don't particularly use the skipping commas, all that much occasionally, you will find this come in handy. But what we often do, is if we know that we get back an array of three things and we're gonna need to then go and say all right, variable 1 equals array index 0, variable 2 equals array index 1.

[00:10:34]
We can save ourselves all those lines of code by just doing destructuring. And especially with objects is super handy, especially when you're working with objects like responses, where was our response? Is it still around? No, it's not. When you're working with objects with lots of properties on them, like document, for example, has like 8 bajillion gajillion properties.

[00:11:00]
And so if I just wanna get let's say, [LAUGH] let (title) = document. I should get, my gosh, if I can type it, the title of the document, just that property. And not all of the other gajillions of properties that I don't care about. So it's very handy when working with objects and lots of stuff.

[00:11:27]
And a lot of the times API's will return us back objects once we've awaited our promises and all that stuff and parsed out our bodies slammed our bodies down. The objects that we get back from API's depending on what API you're working with, sometimes they have like tons of different information and you don't care about much of it, you just care about one thing, maybe or two things.

[00:11:47]
You can pull them out with this destructuring. Cool. And fun fact are spread syntax that dot dot can also be used to capture, instead of expanding and spread. Instead expanding an array, it can be used to collect into an array from all of the rest of the values that we don't care about.

[00:12:17]
So like if I have, let one and then others be 1, 2, 3, 4, oops, Uno and otros for example, can be 1, 2, 3, 4. So now we uno is just the value 1 and otros is 2, 3 and 4 in an array. So this can be handy if you're, maybe I don't care about it right now but maybe I will wanna drill into the rest of the data later.

[00:12:59]
You can also do that with array destructuring. So this is just some fancy syntax to put in your JavaScript toolbox. And most importantly, you don't need to do this, you can always, just go through and say, let uno equal numbers index 0, and so on and so forth.

[00:13:15]
That's totally valid, this is just maybe something that you might run into if you're reading other people's code. Or it might be something if you wanna really flex your syntax muscles might be something you wanna try out. And especially for objects, it can be really handy, and a quick way to get the values you care about.