JavaScript: From Fundamentals to Functional JS, v2 Destructuring Examples

Transcript from the "Destructuring Examples" Lesson

[00:00:00]
>> Till you're just extracting out the values that you want. And you can imagine also that if you're getting some JSON from your back-end, a huge nested data structure, that this can get a little tricky. And so that's what we're gonna do next, we're gonna learn how to extract data and work with nested data structures.

[00:00:17] Before that, I wanted to show you a few examples about destruction. I'm not gonna go super deep into destruction. I just wanted to give you a little taste you have something to start with. But the challenge with destructuring is that, there's so many different ways of going about doing it and so many combinations of syntax.

[00:00:40] That it would take forever for us to go through all of the permutations of it, but I'll show you a little bit. And just to give you an idea, yeah, that sounds good, cool, and it will help us later too because you'll be destructuring some nested things and etc.

[00:01:03] All right, so destructuring an array right we did that, if you want to omit a value, just skip it you can also omit beginning values. We have the spread operator which we haven't talked about yet. All right, and that will gather all of the remaining values, so you'll log something like this.

[00:01:28] So A will be the first one just like you would expect here but using the spread operator. We're just gonna take the rest of them and store them in to be. So remember we were saying, when else did you use a.in JavaScript and someone said spread operator. I was like that's true but that's not what I was referring to at the time.

[00:01:50] Cool, let's see, so this is a really useful one swapping out variables. Typically, how would you swap out a variable if you I couldn't do this. How would we do that, how about cameras? [LAUGH] I don't mean to pick on you but I just remember your name for some reason to good thing.

[00:02:17] Except for maybe I call on you more than other people. So if I wanted b to be 2, And a sorry, excuse me if you wanted b to be 1 and a, to be 2, How might you do that, so you can answer or you can ask me a question.

[00:02:45] You wanna go?
>> Yeah, sure, you would basically create a temporary variable to hold one value while you reassign the other?
>> Why do we have to do this?
>> Why, because if you overwrite In the current value, say stored at A, then you can't use it to set b.

[00:03:12]
>> Wow, what is going on, I have some weird snippets enabled that are just going crazy and then Someone run my code in your head, so I look accurate temp is a, temp is 1, a is now 2 B is now 1 okay. I think it's right, see that?

[00:03:35] So, this is how we would do it before, now, we save a few lines by simply doing this. Pretty cool, right, it's useful, All right, and then we have, again deep into nested data structures. What is this mess, well What do we think, what's the pattern here? I would call it confusing.

[00:04:20]
>> Yeah.
>> [LAUGH] Yeah. So, we are looking at A, right, it starts with from the outer to the inner A and then it's gonna go into the next inner function, which is B. And then it's gonna go only to the next inner function which is a little confusing because we have like, three inner functions here.

[00:04:47] But it's only gonna go to the next one which is 6 is that right so we have one two and then here which actually would be 5. That's interesting that the D is six. Doesn't seem right to me, let's run it and find out. Neither stop, I need to clear my cache or something.

[00:05:31] Okay, so let's see, my question was, is d gonna be 6? What do you guys think? It kinda already tells us Very interesting. Wait not A B okay. C I see interesting You guys see that? So C is actually holding the entire array over here at the in the gray.

[00:06:20]
>> What's the practicality of using nested arrays versus objects?
>> I would recommend not doing something like this.
>> [LAUGH]
>> Yeah, because unless you're doing something like if you're making like a tree data structure or something like that, you can use nested arrays and it makes sense.

[00:06:42] However, I still use objects for to make my tree data structures when I need to do that. The thing with the array is that it's not giving you much information about what is doing what and the shape is kind of hard to understand when it's super nested like this.

[00:07:02] And I would be really surprised to find real code that looks like this. And I would hope not, if it does look like this then they're really like doing something wrong. They're not being thoughtful and how they're building their data structure. Yeah, good question, I like that. Awesome, so let's check out this pattern we have 1, 2, 3 nested arrays and then in here we have 1, 2, 3, 4, 5, right?

[00:07:42] And so what's fascinating to me, is how this translates, right? Is that not interesting to anyone else cuz it seems like it's picking up all the values. Right let's just check D yeah, so we have a is 1 We have two. B is 2, that makes sense to me, does that make sense to you guys?

[00:08:12] Seems straightforward, right? And then C. That's where it gets interesting. C and D.
>> Can I ask, what would happen if you took away the brackets around B like that opening bracket for B and then one of the trailing ones there that change how the assignments go? Because they're looking at the nested brackets on the assigning.

[00:08:42]
>> Yeah, let's check it out.
>> Because we don't have the same amount of layers or what just happened.
>> It's not iterable. That's very interesting. A Yeah, I'm not sure, this is a tricky one.
>> You might be trying to assign the entire array from 2 to 6, also b maybe that.

[00:09:19]
>> Yeah, anyone, so we have 3, and 4, and c, Then d is the last one, very fascinating. What's the takeaway here?
>> I'll use nested arrays. [LAUGH]
>> Yeah, and don't try to distract your crazy nested arrays like this I think that's the biggest takeaway. Is this readable, is this straightforward?

[00:09:53] No, probably not a good idea, cool let's move on. All right, so when you wanna get a value from a property, we saw this right already. This won't match great. And etc and it keeps going. How said excuse keeps going Anyway, so,
>> Do you have these notes somewhere.

[00:10:33]
>> I'll send them out, so yeah I just wanted to show that there's a lot deeper that you can go with this, but we're not gonna go deep into that but it's something interesting to explore, when you're ready. Or I'm sure there's some ESX courses here on the Frontend of Masters platform to go even deeper with destruction