Destructuring

[00:00:00]
>> Maximiliano Firtman: Destructuring, this actually is something that you have probably been using if you're using a framework or a library, mostly if you're using React, for sure you have be using destructuring. But this is an example that gets really complicated. So, what's the idea here? So I have this object, data, that I have, okay, and I wanna extract data from there, creating variable.

[00:00:29]
The standard way to do that is to start using the dot syntax until we get into the data we want. So, for example, for the primarySkill, that is the first skill that we have is data.skills sub 0, right? Well, is there any way to create these five variables but just without in just one expression at once?

[00:01:02]
For that, we can use the destructuring operator, but let's see first a simple example of that. So, probably you have seen this before, it's being used a lot in functions. For example, if I have a function that will operate and receives operands, let's say. And let's say that it returns, let's say some operands.a, operands.b, and then I can call some with something like this, a, oops, 5, b10, okay, that's it.

[00:01:44]
I think we have this example, so, I'm passing an object, the object will contain a and b. So here I received the object, and then I say operands.a, operands.b, I think it's pretty straightforward. Well, instead instead of doing that, I can destructure this object directly in the argument section.

[00:02:13]
For that I will use their calibraces and say a and b, and this is going to destructure that object into two variables, a and b, taking the a and the b values. This should work, I'm not using console.log, you see, but that works, that the destructuring operator. That also works in case I have an array, so if I have an array, and I need to destructure the first two elements of the array, I use square brackets to destructure an array.

[00:02:57]
Then position 0 goes to the first variable, position 1 goes to the second variable and so on, okay? Probably you have to use this. So, but also we can make things really, really complicated, because we can actually create the variable and say, well, you know what? I wanna extract this is an option, okay?

[00:03:20]
So, first I'm going to use this syntax, it can be a variable or a constant or a let, it's up to you. I'm using now the object syntax, but before the equals on the left, if you have it at the right, you are creating data. If you're having to the left, you are creating variables based on a structure.

[00:03:43]
So I say I want the title, then I want primarySkill, but I want primarySkill to take from a skill.0, okay? So I will say, from skills I wanna take the primarySkill, okay, and I'm going to take 0. How can you do that? How can I take skills sub 0 using this syntax, using this structuring?

[00:04:16]
What do you think, does anyone know? So I mean, if I'm using a skills here, I'm getting the whole array not just the first one, right? I can continue working with this, and I can say from a skills, I want the first argument and I want to call this primary scalar.

[00:04:42]
So, he's kind of creating a JSON, but at the left side of the the assignment, to be honest, I haven't seen this in a while in real project a lot, okay? Typically is just a variable, not the whole structure, okay? If you click here, solution, okay, you will get how it looks like, okay?

[00:05:08]
This is the final solution, it's just the same output, but now I'm not creating variables, I have a full structure at the right of the equals. What I'm creating, this is creating variables, okay? I'm creating the title variable, then I'm creating the primarySkill variable with the first skill and I'm creating other skills with the rest of the skills, okay?

[00:05:38]
I'm creating then experience and location variables with the contents of the details object. And then I have these separate variables based on the structure, I'm destructuring that object with the raising side into variables.
>> Maximiliano Firtman: Okay, so it can get really complex, okay, here you have an example of that.

[00:06:03]
But most of the time, I think you don't get too deep in the levels of data you have. You have an object with arrays and objects, you can get deeper and extract variables in one expression. This is only one expression, this is one line, actually, that's the advantage okay?

[00:06:30]
So, you semantically extract all the data and assign the data only the data you want to your variable in just one expression.
>> Maximiliano Firtman: It's like a map, okay, and you are mapping what you want from the data into Bibles.
>> Student: Someone said that they've seen a couple of code bases where the overuse of this makes it pretty difficult to work with.

[00:06:57]
>> Maximiliano Firtman: Yeah, the permanent that it has is that it's difficult to read. Even if you read this example, you read that and it takes some seconds to understand what's going on.
>> Student: Especially if you have type annotations in there as well.
>> Maximiliano Firtman: Well, if you have typescript here or type annotations with other frameworks that you can type on comments, yeah, it gets wild.

[00:07:21]
So I think that, I mean, even if the syntax is there, I think it's becoming an anti pattern, something that you shouldn't be doing because it's actually making your code worse, not better, okay? But for something simple is fine for arguments is being used a lot for something simple.

[00:07:43]
I mean, if you take the skills you say, well, I want the the first few skills. So I say, well, let's take the firstSkill, the secondSkill, or taking from data those skills, I mean I think it's straightforward. I mean, if you read that it's straightforward in creating two constant, two variables, in this case, the firstSkill and secondSkills, they're going to be the skills on position 0, skills on position 1, that's straightforward.

[00:08:13]
But when you start doing this, I mean, it's fine, it works, but I think it's against clarity, if you want, okay?