Destructuring Arrays in JavaScript

JavaScript
Transcript

English (Auto-generated)

Hi everyone in this cast we'll talk about the structuring arrays. So de structuring is an E ES six feature. And the structuring arrays allows you to unpack the values from arrays and assign them to individual variables. And this allows for a more direct way of accessing array items. So let's take a look at what the structuring manually means. So without using the S six feature, let's talk about what if we were to unpack these values from this alphabet area here into individual variables. So in order to assign the value of the first array element from alphabet to a variable, this is what we would do. So I'm going to declare a variable lead first L. Is equal to alphabet At the index zero And then to assign the value of the second element from Alphabet to a variable. We would access its value at Index one. Like so so let second l. Is equal to alphabet at the index one and let's go ahead and console Dot log first L and the second L. So nothing exciting happening here basically we're expecting to see the characters A and B. So I'm gonna go ahead in the browser console and there you go. So we see A and B. Now imagine that we have to do this for all the re elements in the alphabet array and it would be you know, pretty tiresome to do this for each one of the elements in this case we can use the ES six de structuring feature and it's going to allow you to unpack the values from the array into individual variables and this is how we do that. Let me go ahead and first um comment this out. Okay, and now let's take a look at the structuring. So let and out here, I'm going to say first, L The second L um third L Mhm 4th L&L stands for element uh 5th l. And then lastly uh 6th l right is equal to alphabet. Yeah. Okay, so the variables following order from left to right. Therefore the first variable, which is the first L will be assigned the value of the ray item at index zero, which is a second L refers to this string. B. 3rd L refers to see fourth, L refers to D and fifth, L refers to E and lastly six tell refers to yes, so and so on and so forth. So the structuring is this is called the structuring assignment and it allows for a much faster and easier way of assigning array values to variables. So for example, now let's take let's console dot log let's say fourth, L and fourth. L out here refers to this letter which is D. So in the X 0123. 012, three and four. Okay, so 1st, 2nd, so zero and one and two and three. Right. It's D So I'm going to go ahead here and control are and there you go, so now we see the letter D which is corresponding. So this variable, fourth L corresponds to the letter B out here. So we're going left to right now we can also skip array elements if we wish. So for example, let's skip the letter D which is at index three in the alphabet array. And the way we can do that is to just delete this variable name and let the comma B. And now we are, there's no reference to the variable fourth L whose value would correspond to the letter D in the at the third index in the alphabet array. So if we console log four cell to the console to the console, we're actually going to just get a reference error. Right? So it's gonna tell us well it's not found and if I do rest now I refresh, it's gonna say well, uncaught reference error. Fourth L is not defined. So a comma separator is used to skip values in an array. So for example, let's skip the first four values in the alphabet array. And the way we do this is let's just replace them or let the commas be actually so we just leave the commas as is and out here now we have used a comma separated 30 skip the values in the alphabet. Very right. So the variable names have been replaced by commas and will be skipped over and only fifth L and 1/6 l variables will be assigned values corresponding to their position, moving left to right in the alphabet array. So for example, let's just go ahead and now console dot log fifth L out here. Right and 5th, L corresponds to this second last string, which is E. So let me go ahead and save this and let's go to the browser and there you go. So we see the letter E in the in the console. Now, besides doing this, a nested erase can be destructive third as well. So for example, let's just make a nested array here and let's see. Well let array nest is equal to and let's say we have the strings A B and see. And then we have within this another array, which is uh Just a couple of numbers. So 1, 2 and three. There you go. Now in order to use d structured assignment here we will declare variables like this. So I'm going to say well let a B see. Alright, so let a B c. And then let's use uh a comma And Out here we have 1, 2 and three is equal to a re nest. So the variables are declared once again moving left to right and corresponding to the very values from index zero onwards. So let's take a look at these variables. So I'm going to say, well, console dot log variable a variable B variable C. As well as we're both one and 2 and three. And let's go ahead and check this out. So out here you can see that we get the array values for those variables, so a, b, c and 123 right now besides nested race, it's also possible to destructor erase returned from functions. So let's take a look at a simple function. And in the code editor, I'm just going to declare a function and I'll call it function values and then I'm going to say we'll return and this is going to be an array of a couple of string values. So this is let's say um a message right? And we can restructure the array as we've been doing earlier on. So what we're going to do is I'm going to say, well let one two three, four is equal to values. So the return value of this simple function. Now the variables 123 and four correspond to the values of the array items returned from this function, which we've called values and we can confirm this. So let's go ahead and confirm this. But let me go ahead and just comment these logs out and now I'm going to say well, um console dot log one chu three and uh fourth. So I've called it forth here, let me just go ahead and change this to four. So the variable name is now four. And let's check this out. So I'm expecting the values of the variable 123 and four to correspond to these string values. So the variable one will correspond to the strength this and two will correspond to this string which is is and so on and so forth. So control are an uncaught syntax error. Okay, so we've already declared this variable somewhere. There you go. So let me also now comment this out and that should be okay now and there you go. So now we see uh these values this is a message if this is a bit confusing, let's just console dot log the value of variable for here, which corresponds just to the string message. So control. S and then refresh. There you go. So now in my console I see the string message. Now besides doing this, we can also swap the values of variables via de structuring. And this is a pretty handy feature. It's uh you know it makes things much easier. So for example what if I have two variables. So I'm gonna say let author one is equal to uh some author here. So let's say Herman. Um and let's say let's author to is also let another author. So let's say roll down to very nice authors. And now what's wrong smelling? Okay, so now what I'm intending to do is I'm intending to swap the values of these two variables. So Author one variable should have the value of Roald Dahl and author to should have this value of Herman. S. E Right, so let's go ahead and try this out. So out here I'm going to say well hotter Arthur one and alter to is equal to oops, is equal to author too and then the author one. Okay, so the value of the variable Author one on the left side will correspond with the value of Author two on the right side. And similarly the value of author two on the left side corresponds to the value of water, one on the right side. And basically we can confirm that these values have been swapped with a handy console dot log. So I'm going to say well console dot log just author one. So Author one was previously Hermann, Hesse and now it should be swapped with the value of water to which is rolled down. So control s and then let's refresh this here and there you go. So you can see that it's swapped the values of these two variables right now, that's all for de structuring. It's, you know, it's uh it allows for a quick and efficient way to extract values from a race easily and um it's, you know, it's a much cleaner way of doing things um rather than basically when you're trying to swap a variable, you might make a you know, you sometimes see it as let temp so basically let temporary variable um which is empty and then you swap it. But anyways that's besides the point, the structuring is quick and efficient
165 Views 0 Likes 0 Comments

Let's talk about destructuring arrays in JavaScript, which is an ES6 feature.

Comment
Leave a comment (supports markdown format)