00:00 Alright. Let's get into it. So we've got our user type and user object, and we want to grab both the, name and the email from the user. And to do that, typically, we would say const name equals user dot name and const email equals user dot email and so on and so forth for every property that we want. This can be really irritating and annoying and so what we can do instead, what is roughly equivalent is to, say const and then curly braces name comma email curly braces equals user.

00:34 And this allows us Or this is called destructuring and just allows us to pluck off whatever properties we want off of the user object here on the other side of the equal sign. And, any any number of those objects that we want, name, email, we could take the role, etcetera, etcetera, etcetera, as far down as we want. And it's very nice. And now we can use that name, name and email. Save that we go.

00:59 We got alicejohnsonalice@example.com. So that is super nice. I use this all the time all over the place. It is Yeah. Like I said, one of my very favorite features.

01:11 So, yeah. Let's also, use destructuring to get the ID. But, let's say we wanted to do, user ID equals user dot ID. We can do this exact same thing with destructuring. So instead, we're gonna destructure off the user.

01:28 So I'll get rid of the dot ID and yeah, our AI knows exactly what to do. So we get our ID but we wanna change the name. So we do a colon and then user ID. Now, I know what you're thinking. Hey, Kent.

01:40 This looks an awful lot like an object. And it does, but it's not. There are actually several places, in JavaScript that look kind of like objects. Also import as, specifiers, also looks kind of like objects, but it's not. They're just similar looking syntax.

01:58 But this is, a destructuring, identifier, or or rather this is the identifier that we're creating so that we can reference this. So it looks a little bit like an object, but it's not. We're actually declaring a variable and instantiating that variable with this syntax. Okay. Great.

02:16 Let's grab the user email, user ID, save that. There we go. We're in a good spot there. So then, sometimes, in our case, the bio is optional, and our user actually doesn't have a bio. So if I wanted to destructure the bio, then, it's actually a pretty simple process.

02:37 I just say, here, let's spoiler alert from the AI. There we go. I just say, bio off of the user. Right? Just like we did up here.

02:45 And then I can say here, and we're getting undefined because Alice doesn't have a bio. And in some cases, maybe that's fine. You can say, oh, they don't have a bio. I'll display this. But in other cases, maybe you want to have a default bio or in our case, we'll say no bio provided.

03:00 Or, what a great person. And, whoops. There we go. And so that is gonna be the default bio or I guess the default bio would say, I did not change my bio. There you go.

03:15 So that's gonna show up on their profile page. I did not change my bio. But, yeah. So this is destructuring with default values. So if the value is undefined specifically, then it will be assigned to this.

03:29 That does not count if the value is null. So if I say bio null, and here we'll have to say or null to make the types happy, that default will not happen. It's only if it is specifically undefined. The other part of this is you can have it missing entirely or you can specify it as undefined. And if you if it is specified as undefined, then it also will be defaulted.

03:55 So whether it's not present or specified as undefined, that is the same thing, as far as this feature is concerned. K. Great. So we've got our regular destructuring. We've got our alias destructuring.

04:08 We've got our default, value. Now, we're gonna make a function to show you, how we make this work in functions. I love this. So we're gonna take format card, user card. We're going to accept a user and then we can destructure that user right here and get that username and all of that stuff.

04:25 So let's get our console log there and we'll go ahead and export everything here as well. There we go. I did not change my bio. Here's Alice. Here's our function, etcetera, etcetera.

04:34 And, there's the formatted thing. Now, you may have noticed that our AI was trying to be a little helpful and did some destructuring right in this position and that is perfectly reasonable. And actually, this is what I do most of the time. I will typically do destructuring right in the argument list. But I did it this way just so you could see where like, how that code is moving around.

04:58 So this is literally getting past a user object. That's what we're passing is this user object. And you can destructure it in this way if you want to or you can destructure it right in place in, the parameters list. And I think that is awesome. I love that.

05:14 Use that all the time. The other thing I wanted to show you here is we do have a couple variable declarations. We could do this all at once. So here I can take ID as user ID and bio is, I did not change my bio and get rid of all of that. And that's the exact same thing.

05:35 So I typically will do this all at once. Now things do get a little bit fun and interesting when we talk about nested destructuring. So you can actually have an address and we'll say street, yeah, city, etcetera, etcetera. Here, let's make our types happy with that. There we go.

05:54 And so with that, you can actually do nested destructuring. We didn't really have you do this in the exercise, but I thought you'd find it to be kind of interesting. So I'm just gonna show you here really quick. So here, you say address and then you do a colon and then you pluck off the pieces that you want from that. So you can continue on.

06:14 And if if one of these was, another, like, a a sub address, a sub address, then we can like Floor 1 Unit A. Yeah. Sweet. Okay. And then we can grab our or let's just make TypeScript happy about this.

06:28 There we go. So then you can actually continue going sub address, floor unit. And it just keeps going on forever and some people look at this and like, I can't really understand what that is doing. Well, I like, that's kinda confusing. For me, you actually do get used to it after a while, but if if it is too much for you, then, there's nothing stopping you from grabbing the, address, calling it user address, and plugging that from the user, and then destructuring, the address from, here.

06:58 It really is getting excited about those aliases. There we go. And then getting these pieces from the user address. Like, that that is all just fine and dandy. No no problem there.

07:08 The other thing I wanted to mention is, what it or you can actually here's here's kind of a wild thing. We can grab the address here as well and destructure it separately. So we're destructure It's kinda funny. You're destructure the street, city, state, and zip over here, but then you're also destructure the sub address over here. And we can move these over here.

07:29 Though like you can repeat these keys inside of this, destructuring as much as you like. And in fact, we could also say, address, user address here as well. So let's pluck off these properties and then pluck off this property and then we're actually gonna pluck off the address property from the user and call that user address. So you can do all kinds of mix and match things. So that's what I'd like you to do is is play around with this.

07:55 Explore what, like, how you can break this and ask the AI agent, ask your other, co learners, all about destructuring and play around with it and and get some experience. But in practice, what I typically end up doing is, as far as destructuring goes is it's almost always just in the parameter list and it's typically just one level. I do sometimes go into nested destructuring but I don't really have a lot of situations where I find myself needing to do that. So, yeah, there there you go. That's pretty much everything that I wanted to share with you about this.

08:31 We just as another little preview, what if you wanted to grab the name and email and you wanted the rest of properties to be like the rest of the user, you can actually do dot dot dot rest of user. And that is gonna give you the rest of the user properties outside of the name and email. So it's actually a kind of a cool way to say, let's pluck off these properties. I don't care about those, but I want all of the rest and use that sometimes too. So just a little preview, thought there, that dot dot dot keeps showing up and it's great.

09:05 Okay. Great. Hopefully, that was fun and interesting for you. Let's keep going.