1 00:00:02,240 --> 00:00:10,190 So that's the spread operator, another very nice syntax feature is the array destructuring syntax 2 00:00:10,190 --> 00:00:12,960 which you can use. Now for that, 3 00:00:12,970 --> 00:00:16,170 let's go back to my name fragments here 4 00:00:16,240 --> 00:00:17,650 with Max and Schwarz here. 5 00:00:17,650 --> 00:00:22,460 This is a perfect example for where array destructuring might be useful. 6 00:00:22,570 --> 00:00:28,300 You could be getting those from some other function let's say that reads some values from some inputs 7 00:00:28,300 --> 00:00:29,890 you have on your web page 8 00:00:30,130 --> 00:00:35,350 and now you get this as an array but you want to split it into two separate variables with which you 9 00:00:35,350 --> 00:00:36,350 continue working. 10 00:00:36,460 --> 00:00:42,790 So you have your name fragments and to make this easier to read, I'll comment out all of that here actually 11 00:00:43,940 --> 00:00:48,310 so that we have less output in the console and recreate my name data, 12 00:00:48,330 --> 00:00:49,430 name fragments, 13 00:00:49,430 --> 00:00:50,860 however what you want to call it. 14 00:00:50,930 --> 00:00:55,070 So it's Max and Schwarz and this clearly is my first and my last name. 15 00:00:55,130 --> 00:01:00,650 Now in the rest of your code, you might not want to work with this array but with the individual values, 16 00:01:00,980 --> 00:01:07,460 of course you can always access the individual values by their index but always writing name data zero, 17 00:01:07,490 --> 00:01:11,300 name data one just to access these values is a bit cumbersome. 18 00:01:11,300 --> 00:01:18,260 So of course you can store that data in new variables or new constants, first name could be name data 19 00:01:19,040 --> 00:01:26,810 zero and then the last name could be name data one and that is absolutely fine, it works, 20 00:01:26,810 --> 00:01:28,810 nothing wrong with that. 21 00:01:28,880 --> 00:01:34,940 Now there is a shortcut for that though and that's exactly what array destructuring is all about. 22 00:01:34,970 --> 00:01:38,080 You can write this a bit differently, 23 00:01:38,110 --> 00:01:41,510 you can add square brackets here after const, 24 00:01:41,590 --> 00:01:47,410 so on the left side of the equal sign which is something we haven't done before and point at your array 25 00:01:47,860 --> 00:01:54,490 and now what you put between these square brackets are variable names for these elements in the array 26 00:01:54,490 --> 00:01:55,470 on the right side. 27 00:01:55,480 --> 00:01:58,190 So this array has two elements, 28 00:01:58,210 --> 00:02:03,520 so here we can add any names of your choice, for example first name and last name like this 29 00:02:03,580 --> 00:02:10,330 and what Javascript will do is it will pull out the elements here and store the first element in a variable 30 00:02:10,360 --> 00:02:12,770 or in a constant in this case of this name 31 00:02:12,850 --> 00:02:16,750 and the second element in a constant of this name. 32 00:02:16,750 --> 00:02:26,180 So therefore now if you console log first name here and last name and you save that and reload, you see 33 00:02:26,240 --> 00:02:32,600 Max Schwarz is getting logged here but this is now really stemming from these two individual variables 34 00:02:32,630 --> 00:02:33,830 which are output. 35 00:02:33,830 --> 00:02:40,430 So that's a very powerful syntax for a splitting an array into variables with which you want to work. 36 00:02:40,430 --> 00:02:43,300 Now sometimes you also have more data in the array than you want to pull out, 37 00:02:43,310 --> 00:02:51,070 let's say we also have a Mr. identification element in name data and I'm only interested in first and last name, 38 00:02:51,110 --> 00:02:53,830 if I save this and I reload, this works 39 00:02:53,850 --> 00:02:55,220 so we can leave it like this 40 00:02:55,370 --> 00:02:59,510 and if you maybe also want to collect all other information which you have, let's say we also have the 41 00:02:59,520 --> 00:03:00,780 age here, 42 00:03:00,920 --> 00:03:03,860 well then you could add another variable here, 43 00:03:04,100 --> 00:03:09,590 other information or however you want to call it and add that good old rest 44 00:03:09,590 --> 00:03:10,550 operator here. 45 00:03:10,550 --> 00:03:16,610 Now here, I'm calling it rest operator because what it will do here is it will collect all remaining 46 00:03:16,610 --> 00:03:24,050 elements of that array which are not assigned to variables and store them in one brand new variable 47 00:03:24,050 --> 00:03:27,440 which will be a new array that is in the end created. 48 00:03:27,440 --> 00:03:32,090 So here, other information, if I output that as well and we reload, 49 00:03:32,090 --> 00:03:37,490 now we see other information indeed is an array with the two remaining pieces of information which 50 00:03:37,490 --> 00:03:40,070 we don't assign to separate variables. 51 00:03:40,070 --> 00:03:45,740 So you can also do that if you want to kind of collect the remaining data and store that in some 52 00:03:46,100 --> 00:03:48,490 array that holds all the remaining data. 53 00:03:48,500 --> 00:03:53,600 Now needless to say, this destructuring syntax is read and assigned from left to right, 54 00:03:53,810 --> 00:03:56,750 so first element here gets the first element in the array, 55 00:03:56,750 --> 00:04:02,630 second element gets the second element, third element the third or if you use the rest operator, any elements 56 00:04:02,780 --> 00:04:04,430 after this element, 57 00:04:04,430 --> 00:04:08,320 so all the remaining parts here, are merged into this array. 58 00:04:08,480 --> 00:04:15,140 So array destructuring is a really neat feature if you want to split up an array into variables or constants 59 00:04:15,170 --> 00:04:16,940 which you then can use throughout your code. 60 00:04:16,940 --> 00:04:21,980 It simply saves you the extra work of doing this manually and therefore can speed up your development 61 00:04:21,980 --> 00:04:22,550 process.