1 00:00:00,630 --> 00:00:07,080 All right guys so destructuring was introduced in iOS 6 and it gives us an easy way to assign variables 2 00:00:07,110 --> 00:00:11,630 and extract variables from arrays and objects. 3 00:00:11,790 --> 00:00:17,100 If you've ever worked with frameworks like react then you've probably used destructuring before. 4 00:00:17,100 --> 00:00:23,280 Not just frameworks but any kind of modularize javascript and we're going to go over E.S. 6 modules 5 00:00:23,520 --> 00:00:27,230 later on and actually build a project using them. 6 00:00:27,660 --> 00:00:32,340 So let's go ahead and do this now since we're not using modules we're just going to use hardcoded data 7 00:00:32,340 --> 00:00:34,100 in the same file. 8 00:00:34,200 --> 00:00:39,720 But let's go ahead and look at destructuring. 9 00:00:40,090 --> 00:00:44,100 They spell it right D structuring. 10 00:00:44,220 --> 00:00:48,690 It's hard to talk and type at the same time let's say assignment. 11 00:00:48,690 --> 00:00:50,660 So destructuring assignment. 12 00:00:50,730 --> 00:00:55,370 So let's say we want to create a variable say A and B. 13 00:00:55,380 --> 00:01:02,190 So we just go initialize them here and then we're going to set some brackets and say A and B and Set 14 00:01:02,190 --> 00:01:07,410 that equal to an array of 100 and 200. 15 00:01:07,700 --> 00:01:08,100 All right. 16 00:01:08,100 --> 00:01:11,870 Now if we go ahead and console Daut log a. 17 00:01:11,900 --> 00:01:13,540 What do you think we're going to get. 18 00:01:13,740 --> 00:01:19,770 Let's save and you can see we're going to get 100 and I'm guessing that you know what B will give us 19 00:01:20,130 --> 00:01:25,950 and that's going to give us 200 and we could keep going on we could do see 300 and so on. 20 00:01:25,950 --> 00:01:26,270 All right. 21 00:01:26,280 --> 00:01:28,800 Another thing we could do is use the rest. 22 00:01:28,800 --> 00:01:34,380 I don't know if it's the rest operator or the rest pattern as I believe is what it's called. 23 00:01:34,380 --> 00:01:36,840 So it's a rest pattern. 24 00:01:37,320 --> 00:01:45,120 So what this means is let's say we want a to b 100 B to be 200 and then we have a bunch of other values 25 00:01:45,120 --> 00:01:57,600 like 300 400 500 and then we want a variable to be called rest so we're going to use this three dots 26 00:01:57,600 --> 00:01:57,870 here. 27 00:01:57,870 --> 00:02:03,220 This is actually called the spread operator which we're going to get into and a little bit. 28 00:02:03,390 --> 00:02:10,430 But this is going to assign whatever's left over into an array into a variable called rest. 29 00:02:10,440 --> 00:02:17,250 So let's go ahead and console log rest and save and you can see now we have an array that has three 30 00:02:17,250 --> 00:02:20,400 values 300 400 and 500. 31 00:02:20,400 --> 00:02:30,120 Now if I were to add a C variable here like that and save now it only has two because now C is going 32 00:02:30,120 --> 00:02:32,320 to have the 300 inside of it. 33 00:02:32,330 --> 00:02:35,800 I save that can console logs see we get 300. 34 00:02:36,060 --> 00:02:36,330 All right. 35 00:02:36,330 --> 00:02:38,970 So that's how the rest pattern works. 36 00:02:38,970 --> 00:02:44,640 Now this is using a raise we can also do this with objects so we're going to do is I'm going to use 37 00:02:44,640 --> 00:02:53,140 parentheses here to make this an expression and then we'll use curly braces and we'll say A and B and 38 00:02:53,160 --> 00:02:59,900 we're going to set that equal to another set of curly braces and actually put spaces in here that that's 39 00:02:59,910 --> 00:03:01,220 a little neater. 40 00:03:01,980 --> 00:03:16,710 And in here we're going to say a 100 be 200 300 400 and be 500. 41 00:03:17,430 --> 00:03:17,800 All right. 42 00:03:17,820 --> 00:03:28,850 And then we can go down here we can say Konsole dog log in let's log A and B and save and you can see 43 00:03:28,870 --> 00:03:34,390 we get 100 and 200 and we can use the rest pattern here as well. 44 00:03:34,410 --> 00:03:45,180 So if I were to copy this and let's just put it in a comma here and say dot dot dot rest and then let's 45 00:03:45,180 --> 00:03:53,690 go ahead and log the rest and save and you can see we get C 300 D 400 and 500. 46 00:03:53,700 --> 00:03:57,640 All right so this is destructuring assignment. 47 00:03:57,690 --> 00:03:58,450 Now let's. 48 00:03:58,490 --> 00:04:04,870 This is kind of confusing so let's let's go a little further into both a re destructuring and object 49 00:04:04,870 --> 00:04:08,360 destructuring in a way that we would actually use it. 50 00:04:08,430 --> 00:04:08,760 All right. 51 00:04:08,760 --> 00:04:09,970 So let's say Auray 52 00:04:13,050 --> 00:04:15,010 destructuring. 53 00:04:15,090 --> 00:04:22,950 So what we'll do is create an array here called people and we just set it to some names will say John 54 00:04:24,930 --> 00:04:37,620 F. and Mike and then what I want to do here is say Konst and then set some brackets here with some variable 55 00:04:37,620 --> 00:04:48,220 names like person 1 person to person 3 and we're going to set this equal to people. 56 00:04:48,240 --> 00:04:55,170 All right so going by what we did up here you guys can probably understand whats going to happen here. 57 00:04:55,260 --> 00:04:59,790 It's going to put Jaun into Person one Beth into Person 2 and so on. 58 00:04:59,790 --> 00:05:09,150 So let's make sure that that actually happens so we'll say person one person to person three and save 59 00:05:09,160 --> 00:05:17,680 and you could see we get John Beth and Mike now we can also do this with an array that was returned 60 00:05:17,680 --> 00:05:18,580 from a function. 61 00:05:18,580 --> 00:05:22,510 So it's a parse array 62 00:05:25,930 --> 00:05:32,230 returned from functions so if we were to do like function get people 63 00:05:35,240 --> 00:05:38,620 and then return an array like this. 64 00:05:43,680 --> 00:05:49,840 Then we could go down here and we can say first of all it's initialize. 65 00:05:49,960 --> 00:05:54,340 Person 1 Person 2 and Person 3 66 00:05:57,240 --> 00:05:58,110 and then we'll set 67 00:06:04,440 --> 00:06:13,850 set those equal to get people equal to the function itself and then do what we did here and just log 68 00:06:13,850 --> 00:06:16,100 all three variables. 69 00:06:16,700 --> 00:06:19,020 And again we get John and Mike. 70 00:06:19,250 --> 00:06:22,370 All right so that is a ray destructuring. 71 00:06:22,550 --> 00:06:31,050 So I don't think that this is as useful as object destructuring So let's get into that. 72 00:06:31,870 --> 00:06:32,170 All right. 73 00:06:32,170 --> 00:06:37,920 So when you work with hold on restructuring. 74 00:06:38,740 --> 00:06:45,880 So when you work with frameworks like reactor you using E6 modules you're usually going to deal with 75 00:06:45,910 --> 00:06:52,240 object destructuring you may have some kind of library module where you have where you are exporting 76 00:06:52,800 --> 00:06:58,750 an object but you what you want to get certain functions or certain properties from that object. 77 00:06:58,750 --> 00:07:06,070 So what I'm going to do is just create an object called person and will set a name 78 00:07:11,790 --> 00:07:12,740 and age 79 00:07:15,840 --> 00:07:16,590 city 80 00:07:19,320 --> 00:07:25,800 and let's do I don't know gender. 81 00:07:25,900 --> 00:07:26,200 All right. 82 00:07:26,230 --> 00:07:28,930 So we have this object now. 83 00:07:28,990 --> 00:07:31,460 The old 6 way. 84 00:07:31,660 --> 00:07:32,960 I'm sorry the old ears. 85 00:07:32,970 --> 00:07:35,320 5:01 let me just show you what we would do. 86 00:07:35,410 --> 00:07:49,120 We would say like Konst name equals person dot name and then we'd have to do age equals person dot age 87 00:07:50,230 --> 00:07:56,500 and then let's say we wanted this city person dot city. 88 00:07:56,620 --> 00:07:58,350 All right so we'd have to do something like that. 89 00:07:58,360 --> 00:08:04,090 But now let's say new iOS 6 90 00:08:08,700 --> 00:08:17,310 restructuring and we can simply do Konst and then open up some curly braces here and just basically 91 00:08:17,310 --> 00:08:18,600 pick out what we want. 92 00:08:18,600 --> 00:08:27,600 So name age and city and we can say equals person. 93 00:08:27,780 --> 00:08:28,130 All right. 94 00:08:28,130 --> 00:08:37,650 So I'm going to just comment that out and let's see what happens if we do console log the name the age 95 00:08:37,740 --> 00:08:42,810 in the city and save and you can see we get John Doe 30 to Miami. 96 00:08:42,870 --> 00:08:52,150 So this is a much cleaner and easier way than doing this and even if we had like a function in here 97 00:09:02,750 --> 00:09:07,270 soon and if we did something like that we could just go and throw in here. 98 00:09:07,600 --> 00:09:14,570 Say hello we're down here and call the function and save and we get hello. 99 00:09:14,830 --> 00:09:16,450 All right so it makes things much easier. 100 00:09:16,450 --> 00:09:22,690 This is actually something that's used quite quite a bit in in ESX. 101 00:09:22,690 --> 00:09:26,590 All right guys so that's going to do it for destructuring we're going to look more into this later on 102 00:09:26,590 --> 00:09:28,450 when we start to get into modules.