Transcript from the "Destructuring Objects & Arrays" Lesson
[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: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
. I have sort of ignored the name, so right now if I reference nickname that works.
>> 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
[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: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: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.