WEBVTT 0 00:00.120 --> 00:07.680 Hey guys. In this lesson I want to go over this concept of destructuring, so destructuring objects, destructuring 1 00:07.710 --> 00:08.610 arrays. 2 00:08.790 --> 00:15.000 And the goal of this lesson is to really make it clear in your mind how destructuring works in JavaScript 3 00:15.030 --> 00:19.080 ES6 and get really used to the syntax. 4 00:19.080 --> 00:24.000 Now if you're already pretty familiar with this concept of destructuring and you've already used it 5 00:24.390 --> 00:31.620 and you have no problems using it at all, then feel free to simply just complete the challenge and if 6 00:31.620 --> 00:36.610 you can complete it without any problems then feel free to skip this lesson. 7 00:36.630 --> 00:46.950 So the idea is to uncomment all of the code below the challenge line and what we want to happen is to 8 00:46.950 --> 00:55.380 render the stats that come from our practice.js file where there's a constant called cars. And 9 00:55.380 --> 00:57.880 this is a relatively complex structure. 10 00:57.900 --> 01:02.310 It's an array with two objects inside the object. 11 01:02.310 --> 01:07.380 There's other nested objects and there's also other nested arrays. 12 01:08.250 --> 01:17.790 So the idea is to not change any of this code here and try to use these names of variables to make this 13 01:17.790 --> 01:23.410 work by destructuring the code from our practice.js file. 14 01:24.150 --> 01:28.020 Here's what you should be able to achieve once you complete the challenge. 15 01:28.020 --> 01:35.550 We have this table over here with the brand, the top speed and the top color. And all of this data is 16 01:35.550 --> 01:39.390 being pulled out from our cars array. 17 01:39.420 --> 01:47.190 The model corresponds to this first column and then the top speed corresponds to this property topSpeed 18 01:47.580 --> 01:52.250 and the top color is the first color in the array. 19 01:52.260 --> 01:58.660 Now don't worry if you see these errors in the console. It's not related to any of your code. 20 01:58.740 --> 02:03.320 It's to do with how we're structuring our HTML that React doesn't like. 21 02:03.420 --> 02:07.890 But I wanted to keep the table simple so we can focus on destructuring. 22 02:08.220 --> 02:14.220 So the idea is to make the errors go away without touching any of the existing code and just adding 23 02:14.220 --> 02:19.530 some code right here to destructure the array inside practice.js. 24 02:19.590 --> 02:25.170 And if you can complete this without problems, then I'm happy for you to skip this lesson. But if you 25 02:25.180 --> 02:25.650 are 26 02:25.640 --> 02:31.860 not sure where to start or if you get stuck during the challenge, then I recommend watching this video 27 02:32.040 --> 02:38.100 where I'm going to dive deeper into how to destructure nested arrays how to provide default values and 28 02:38.100 --> 02:39.330 all of that. 29 02:39.510 --> 02:45.730 So let's get started by forking a copy of the starting sandbox. And to start off 30 02:45.750 --> 02:48.560 I'm actually going to ignore this entire challenge and 31 02:48.560 --> 02:54.360 I'm just gonna make some space for myself inside the index.js. And we're not gonna be working 32 02:54.360 --> 02:56.970 with the practice.js data yet. 33 02:56.970 --> 03:02.970 We're going to start off using this file called data.js. And I want to quickly reiterate some 34 03:02.970 --> 03:08.100 of the things I spoke about when I first introduced you to this concept of destructuring. 35 03:08.100 --> 03:16.420 So here we have an array called animals and it has two objects as the first and second items. 36 03:16.470 --> 03:23.490 Now the first thing I'm gonna do is I'm going to export this animals as the default export and then 37 03:23.490 --> 03:26.160 I'm gonna import it into my index.js. 38 03:29.270 --> 03:29.610 All right. 39 03:29.710 --> 03:37.620 So I'm pulling animals that array in from my file data and now the first thing to do is I'm just going 40 03:37.620 --> 03:43.000 to log what animals looks like because this is probably what you're going to be doing when you're looking 41 03:43.000 --> 03:50.140 at data that's coming from another provider say an API or some sort of module or some sort of framework 42 03:50.140 --> 03:51.000 like React. 43 03:51.340 --> 03:54.010 So we notice that we've got two objects: 44 03:54.010 --> 03:55.540 one is a cat and one is a dog. 45 03:56.140 --> 04:03.150 So the first thing I'm gonna do is I'm going to destructure this array of animals into a variable so 46 04:03.200 --> 04:06.720 I can hold the first object in a variable called cat 47 04:06.860 --> 04:09.450 and the second object in a variable called dog. 48 04:09.490 --> 04:13.600 So if you want to give that a go, pause the video now. All right. 49 04:13.620 --> 04:19.560 So in order to destructure this, I'm going to create a new constant and because I'm destructuring an 50 04:19.560 --> 04:24.020 array, the variable names go inside an array literal like this, 51 04:24.040 --> 04:31.660 so two square brackets. Now the first item in that animal's array if we remember was a cat 52 04:31.830 --> 04:33.860 and the second was a dog. 53 04:33.930 --> 04:41.790 So I'm going to set these as the names of the first item and the second item from this animals array. 54 04:42.570 --> 04:49.050 So now what my code has done is it reached inside this array of animals pulled out the first item and 55 04:49.050 --> 04:53.730 assigned it a name of cat, pulled out a second item and assigned it a name of dog. 56 04:53.880 --> 05:02.010 If I decide to log the value of cat, you can see it is just a single object with two properties. 57 05:02.010 --> 05:09.150 So I've freed it from the array effectively. And this is pretty much the same as saying var cat = 58 05:09.270 --> 05:12.100 animals[0]. 59 05:12.120 --> 05:18.730 It does exactly the same thing but obviously in a much more concise kind of syntax. 60 05:18.900 --> 05:25.410 The other thing to remember is that when you destructure anything say an array or an object into 61 05:25.500 --> 05:27.760 separate variable names, 62 05:27.930 --> 05:31.470 these names need to be unique inside your file. 63 05:31.470 --> 05:37.440 So for example, you can't destructure this animals array and pull out something to be held inside a variable 64 05:37.440 --> 05:44.280 called cat and then create another variable called cat. You will get an error saying that identify cat 65 05:44.310 --> 05:48.590 has already been used and declared. So these names 66 05:48.750 --> 05:56.560 when you destructure must be unique. So now that we've destructured our array, let's think about how 67 05:56.560 --> 06:04.240 we can destructure an object. So we know that our cat is now pulled out of animals and it is in fact 68 06:04.690 --> 06:05.860 an object right? 69 06:06.250 --> 06:10.870 So if we wanted to destructure this object, how would we go about it? 70 06:10.870 --> 06:18.220 Well the syntax is very similar but this time because we're destructuring an object we're going to create 71 06:18.370 --> 06:26.290 a object literal using a set of curly braces instead. And inside these curly braces we can pull out any 72 06:26.290 --> 06:34.560 of the properties that we want from the object. So we know that the cat object has two properties, one 73 06:34.560 --> 06:37.210 called name and the other is called sound. 74 06:37.210 --> 06:45.580 So if we wanted to, we can pull out both of these properties, name and sound, and get it out of that cat 75 06:45.760 --> 06:47.010 object. 76 06:47.020 --> 06:54.520 Now we have a variable called name and a variable called sound which is equivalent to cat.name and 77 06:54.520 --> 06:55.780 cat.sound. 78 06:57.130 --> 07:05.140 And if I decide to log the value of say sound, you can see that I get the word 'meow' being printed out. 79 07:06.090 --> 07:13.330 And this provides us a lot of convenience because going from this original array of animals, in order 80 07:13.330 --> 07:23.380 to get this sound 'meow' logged, we would have had to say animals[0].sound and we would have 81 07:23.380 --> 07:31.120 to do this every single time we needed the value inside this property. But remember that there's a crucial 82 07:31.120 --> 07:35.470 difference when you're destructuring objects versus arrays. 83 07:35.470 --> 07:41.620 Notice how in the array we could have basically called each of these destructured variables any name 84 07:41.620 --> 07:45.430 we wanted. I could call this c and call this d. 85 07:46.180 --> 07:54.820 And I decide to log c, notice how it is still going to log cat. But when you destructure an object, these 86 07:54.820 --> 08:01.460 names that are going inside here have to match with the property names of that object. 87 08:01.510 --> 08:04.580 This way it knows which one to actually pull out. 88 08:04.630 --> 08:08.490 So these have to be the same as the keys that you see here. 89 08:08.590 --> 08:14.620 Now notice how if I decide to change this to animalSound instead of sound which is what is actually 90 08:14.620 --> 08:21.310 called, this no longer works and it prints undefined because it looks inside this object tries to find 91 08:21.310 --> 08:26.980 the value for this key animalSound and clearly there is no key called animalSound. 92 08:27.010 --> 08:35.030 So this comes back as undefined instead. Now destructuring can be useful for other things as well. 93 08:35.040 --> 08:42.810 For example, if you wanted to actually give these variables a different name to what they were as the 94 08:42.810 --> 08:45.600 properties of the object, you can do that. 95 08:45.690 --> 08:51.420 You can simply add a colon and say this is going to be called catName 96 08:51.420 --> 08:56.610 and this is going to be called catsound. 97 08:56.610 --> 09:03.230 So now what happens is you no longer have access to these variable names sound and name. 98 09:03.270 --> 09:12.970 Instead you've turned it into catSound which comes out as meow and catName which comes out as cat. 99 09:12.990 --> 09:19.560 This is a way of providing an alternative name for the properties that come from an object. 100 09:19.740 --> 09:26.280 And this is really useful especially when your getting hold of data from public APIs where you didn't 101 09:26.280 --> 09:31.130 really get the chance to name the properties inside those JSONs. 102 09:31.170 --> 09:33.210 Sometimes they make sense, sometimes they don't. 103 09:33.210 --> 09:38.160 Sometimes they're very very short and and if you wanted to put your own touch then this is how you might 104 09:38.160 --> 09:39.780 do it. Now 105 09:39.810 --> 09:44.780 the other thing I wanted to show you is how you would provide a default value. 106 09:45.000 --> 09:53.940 For example, if we were going to destructure our cats object again and we have our name and our sound 107 09:54.150 --> 09:56.070 set to equal to cat, 108 09:56.550 --> 10:01.110 but I wanted to give name and sound a custom value. 109 10:01.110 --> 10:02.930 How might I do that? 110 10:02.940 --> 10:10.360 Well you could simply just add in an equal sign, say name is equal to, let's call it I don't know, 111 10:10.500 --> 10:15.050 Fluffy and sound is equal to Purr. 112 10:15.060 --> 10:17.100 So now what happens when I log 113 10:17.100 --> 10:26.010 name is that it comes out as cat because that is the value for name from this object cat. 114 10:26.100 --> 10:30.910 But if it didn't have a name, let's say we go into the data 115 10:31.080 --> 10:37.000 I delete the name and I come back, then notice how it's now being printed as fluffy. 116 10:37.050 --> 10:45.780 So this basically says if name is undefined, then use this value instead. And this is also really helpful 117 10:45.810 --> 10:51.030 because sometimes when you're getting data again from the Internet, a lot of these fields might not be 118 10:51.030 --> 10:51.610 filled. 119 10:51.630 --> 10:55.050 So you don't want your app or your website to just crash. 120 10:55.050 --> 11:00.920 You want to give it some default value so that it will actually get displayed. Now 121 11:00.930 --> 11:06.900 the final thing I want to show you regarding destructuring objects is what to do when you have a 122 11:06.900 --> 11:14.890 nested object. So let's say that in addition to the properties name and sound, we had another property 123 11:14.890 --> 11:25.930 called feedingRequirements. And this property is going to hold its own object and it has a property 124 11:25.930 --> 11:29.050 called food and another one called water. 125 11:29.050 --> 11:34.450 So let's say that food is two times a day and they have to be watered three times a day. 126 11:34.450 --> 11:40.460 So in this case we've now got an object which has an object inside it. 127 11:41.050 --> 11:45.290 So how would we destructure these nested objects? 128 11:45.310 --> 11:52.030 Let's say that I wanted to log the number of times that I have to feed my cat. 129 11:52.030 --> 12:01.080 So I want to be able to log the value of food that lives inside this cat object. Well we start out with 130 12:01.080 --> 12:07.720 our const and our cat object remember has those two properties, name and sound. 131 12:07.800 --> 12:11.830 So let's go ahead and destructure it down to name and sound. 132 12:12.240 --> 12:17.490 But we've now got an extra one called feedingRequirements so let's add that in here as well. 133 12:20.670 --> 12:23.090 So now let's set it to equal to cat 134 12:23.160 --> 12:28.710 and if I go ahead and log the value of feedingRequirements 135 12:33.410 --> 12:36.820 you can see that I get this object being logged right? 136 12:36.890 --> 12:39.890 It's got food and water as properties. 137 12:39.890 --> 12:48.650 Now I can if I want to get hold of food by simply writing feedingRequirements.food which is our 138 12:48.650 --> 12:49.640 usual syntax. 139 12:49.910 --> 12:57.320 But what if I wanted to get hold of just food by itself without having to use the dot syntax effectively 140 12:57.350 --> 13:00.080 destructuring it again? 141 13:00.230 --> 13:01.100 How would I do that? 142 13:01.670 --> 13:08.930 Well, you can simply set this feedingRequirements instead of giving it an alternative name, 143 13:08.930 --> 13:14.060 you open up a set of curly braces and you pull out the values inside. 144 13:14.330 --> 13:18.770 So those things were called food and water. 145 13:18.770 --> 13:26.690 So now if you console log food, you're going to get the number of times that the cat needs to be fed. 146 13:26.750 --> 13:31.360 And this is done through a extensive destructuring. 147 13:31.490 --> 13:40.670 So we got a hold of our object cat which is this one, we pulled out the feedingRequirements object and 148 13:40.670 --> 13:44.000 then out of that object we further destructed it 149 13:44.030 --> 13:51.410 so we had a variable called food which is set to the value of two and water which is set to the value 150 13:51.410 --> 13:52.550 of three. 151 13:52.550 --> 13:56.120 Now remember you can destructure as much or as little as you want. 152 13:56.120 --> 14:02.850 So for example for our cat, if I only wanted the feeding requirements destructed, then I can do that. 153 14:02.870 --> 14:08.330 You don't have to do it for all of the keys and values inside an object. 154 14:08.330 --> 14:15.500 So hopefully that clears things up a little bit more and you've got some new ideas of how to destructure 155 14:15.920 --> 14:20.400 arrays and how to destructure objects. 156 14:20.870 --> 14:29.720 So the next thing I want to show you is a little bit about how the sets states function might look. If 157 14:29.870 --> 14:37.710 inside our data.js let's say that we had a function and it was called useAnimals. 158 14:37.740 --> 14:41.750 This sounds like some animal abuse but it's not. 159 14:41.840 --> 14:48.740 No animals are going to be harmed in this function but what we are going to do is we're going to accept 160 14:48.830 --> 14:58.340 an animal as an input to this function and we're going to return an array. This array has two values 161 14:58.430 --> 15:05.360 only. It's going to be the animal.name and a function. 162 15:05.360 --> 15:15.260 So this function is going to console log the animal.sound. So it's going to effectively make the 163 15:15.260 --> 15:15.990 sound right? 164 15:17.290 --> 15:23.470 Now that we've created this function called useAnimals and it returns an array with two items 165 15:23.470 --> 15:26.280 one is a string the name of the animal, 166 15:26.440 --> 15:30.600 and the other is a function which does something. When it's activated 167 15:30.610 --> 15:32.800 it just makes a sound. 168 15:32.800 --> 15:42.300 Now if we go ahead and export this function as well, useAnimals and we go back inside our index. 169 15:42.310 --> 15:47.740 .js we can now import it in the same kind of syntax as we imported 170 15:47.740 --> 15:52.540 our useState right? By tagging after the default 171 15:52.550 --> 16:01.050 export like so. Now let's say that I decided to use this function called useAnimals and pass my animal 172 16:01.080 --> 16:03.810 object cat inside. 173 16:03.810 --> 16:14.070 Now if I go ahead and log the value of this useAnimals with cat, then you can see that what gets logged 174 16:14.220 --> 16:16.750 is an array with two items. 175 16:16.920 --> 16:23.160 The first item is the string cats and the second item is a function. 176 16:23.160 --> 16:29.130 Now that I know that the output of this function is an array, well I can simply just destructure it right? 177 16:29.520 --> 16:37.050 So I can create a const, add a set of square brackets to create an array literal, so the first item that 178 16:37.050 --> 16:43.770 goes in here is gonna be the name of the first item of the array which I'll just call animal. 179 16:43.770 --> 16:48.080 And the second item is going to be assigned the value of the function. 180 16:48.210 --> 16:55.700 So I'll call the function makeSound. And then I'm gonna set it equal to the output of this function 181 16:55.710 --> 16:57.760 useAnimals with cat. 182 16:57.780 --> 17:08.580 Now if I console log animal, you can see that I'm going to get cat printed out. And if I go ahead and 183 17:08.580 --> 17:20.510 get hold of makeSound and I call it, then you'll see it says 'meow'. So this would, I imagine, be very similar 184 17:20.540 --> 17:29.330 to how useState would look. And I hope by deconstructing our own example you can better understand how 185 17:29.330 --> 17:33.560 that code for useState actually works. 186 17:33.560 --> 17:40.630 So now that you've learned a lot more about destructuring, it's time to complete this challenge. 187 17:40.780 --> 17:44.120 Pause the video now and I'll show you the solution in the next lesson.