WEBVTT 1 00:00:01.476 --> 00:00:02.433 Let's now talk 2 00:00:02.433 --> 00:00:05.516 about something called destructuring. 3 00:00:06.384 --> 00:00:11.373 Destructuring gives us a very convenient way to extract data 4 00:00:11.373 --> 00:00:15.484 from a data structure like an object or an array. 5 00:00:15.484 --> 00:00:19.769 Imagine that we had an array filled with some data, 6 00:00:19.769 --> 00:00:22.774 and that we now wanted to store each of the elements 7 00:00:22.774 --> 00:00:25.675 of that array in a single variable. 8 00:00:25.675 --> 00:00:29.675 Let's start, again, with doing it in ES5, right, 9 00:00:31.778 --> 00:00:36.371 and let's first write our array, so a very simple array. 10 00:00:36.371 --> 00:00:40.538 Just with the name and the age of John, okay, and 26. 11 00:00:44.315 --> 00:00:46.381 If you wanted to store each of the elements 12 00:00:46.381 --> 00:00:48.761 in a separate variable, we would simply 13 00:00:48.761 --> 00:00:52.928 have to write one variable for each element just like this. 14 00:00:54.032 --> 00:00:58.199 The name and it's the first element of John, so zero, 15 00:00:59.722 --> 00:01:03.389 and then a variable for the age and john[1]. 16 00:01:07.782 --> 00:01:11.732 Okay, so now we have both elements in separate variables. 17 00:01:11.732 --> 00:01:14.368 Now imagine that we had like five or 10 elements 18 00:01:14.368 --> 00:01:15.615 in that array. 19 00:01:15.615 --> 00:01:17.762 Then it would become a bit impractical 20 00:01:17.762 --> 00:01:20.611 to do this every time like this, right, 21 00:01:20.611 --> 00:01:24.090 and so in ES6 we have something called destructuring, 22 00:01:24.090 --> 00:01:27.423 once again, and it would work like this. 23 00:01:28.766 --> 00:01:30.441 So ES6 now. 24 00:01:30.441 --> 00:01:34.608 With destructuring we can destructure a data structure 25 00:01:35.781 --> 00:01:36.660 just like this. 26 00:01:36.660 --> 00:01:39.860 We create a new variable, and then 27 00:01:39.860 --> 00:01:42.193 in here we put name and year 28 00:01:45.068 --> 00:01:48.985 and then we put our array in here, John and 26. 29 00:01:51.446 --> 00:01:53.815 What this is gonna do is it's gonna create 30 00:01:53.815 --> 00:01:57.852 a constant called name and a constant called year, 31 00:01:57.852 --> 00:02:01.853 and then this data will be stored in each of the variables. 32 00:02:01.853 --> 00:02:06.020 Let's actually check that, so console.log with the name 33 00:02:10.614 --> 00:02:14.781 and with the year, and actually it should be age, okay? 34 00:02:16.461 --> 00:02:18.044 Let's check it out. 35 00:02:18.932 --> 00:02:20.828 Okay, the problem here is, of course, 36 00:02:20.828 --> 00:02:25.373 that I already used the variable called name before, right, 37 00:02:25.373 --> 00:02:27.873 so let's just get rid of this, 38 00:02:29.856 --> 00:02:32.031 and now it's gonna work, of course. 39 00:02:32.031 --> 00:02:37.014 Okay so, again, we destructured this data structure here 40 00:02:37.014 --> 00:02:40.907 using this kind of syntax here, so it's like the opposite 41 00:02:40.907 --> 00:02:43.024 of constructing a data structure. 42 00:02:43.024 --> 00:02:47.338 With this here we construct, we build, a data structure, 43 00:02:47.338 --> 00:02:51.018 and then with this syntax here we destruct it. 44 00:02:51.018 --> 00:02:53.962 This, actually, also works with objects. 45 00:02:53.962 --> 00:02:56.595 Imagine we had an object. 46 00:02:56.595 --> 00:02:59.012 I'm simply gonna call it obj. 47 00:03:00.895 --> 00:03:02.978 So firstName and lastName 48 00:03:10.476 --> 00:03:11.809 as usual, right? 49 00:03:13.032 --> 00:03:16.408 Now destructuring works in exact same way. 50 00:03:16.408 --> 00:03:20.096 All we have to make sure is that the keys actually match 51 00:03:20.096 --> 00:03:24.635 with our new variable names, so let's do that. 52 00:03:24.635 --> 00:03:28.411 Now it's an object, and so we use the curly braces here, 53 00:03:28.411 --> 00:03:32.310 of course, because the object is also constructed like that, 54 00:03:32.310 --> 00:03:35.275 so that's also how we destruct it, okay? 55 00:03:35.275 --> 00:03:39.025 We write firstName and lastName, and remember 56 00:03:42.584 --> 00:03:46.901 that these keys here have to be the exact same thing here, 57 00:03:46.901 --> 00:03:51.249 so these new variable names have to match the keys. 58 00:03:51.249 --> 00:03:54.828 Now we just say object, and that's it. 59 00:03:54.828 --> 00:03:57.952 Now we created two brand new constants 60 00:03:57.952 --> 00:04:01.202 which store the data out of the object. 61 00:04:02.650 --> 00:04:05.567 Let's just very quickly check that. 62 00:04:10.088 --> 00:04:13.338 FirstName and lastName, and here we go. 63 00:04:17.012 --> 00:04:20.065 Now if we don't want the variable names to match 64 00:04:20.065 --> 00:04:24.604 with the key names, then we can also use different names, 65 00:04:24.604 --> 00:04:27.687 and it's gonna work simply like this. 66 00:04:29.121 --> 00:04:32.230 Again we use the curly braces. 67 00:04:32.230 --> 00:04:35.397 Then we say {firstName: a, for example 68 00:04:37.622 --> 00:04:40.082 if you wanted the variable to be called a, 69 00:04:40.082 --> 00:04:42.832 and then lastName: b} = obj; 70 00:04:46.290 --> 00:04:48.223 and that's it, 71 00:04:48.223 --> 00:04:52.056 so let's just quickly see if we have the same. 72 00:04:56.634 --> 00:04:59.553 Yeah, again, it's John Smith here. 73 00:04:59.553 --> 00:05:03.376 Okay, so this is how destructuring works, but let's now see 74 00:05:03.376 --> 00:05:06.601 a more practical application of destructuring. 75 00:05:06.601 --> 00:05:08.784 A very good application is to, actually, 76 00:05:08.784 --> 00:05:11.722 return multiple values from a function, 77 00:05:11.722 --> 00:05:15.305 so in a more easier way than we used to do before. 78 00:05:15.305 --> 00:05:18.817 At ES5, usually, if we had more than one value 79 00:05:18.817 --> 00:05:20.901 that we wanted to return from a function, 80 00:05:20.901 --> 00:05:24.773 we would simply return an object, but now with destructuring 81 00:05:24.773 --> 00:05:28.786 it got a bit easier, so let's try that out. 82 00:05:28.786 --> 00:05:31.933 Let's create a function that returns the age of a person 83 00:05:31.933 --> 00:05:35.748 as well as the remaining time for retirement. 84 00:05:35.748 --> 00:05:38.618 We used that before, but now we're gonna use both 85 00:05:38.618 --> 00:05:42.478 of these concepts in the same function, okay? 86 00:05:42.478 --> 00:05:45.145 So a function calcAgeRetirement, 87 00:05:49.436 --> 00:05:52.853 and that's based on a year that we input. 88 00:05:53.977 --> 00:05:58.144 So const age, so let's now create a new date here, okay, 89 00:06:00.359 --> 00:06:03.609 so that, or year, is always up to date. 90 00:06:04.956 --> 00:06:09.008 So getFullYear instead of simply using 2016 91 00:06:09.008 --> 00:06:13.772 or something like that, so instead of hard coding it here. 92 00:06:13.772 --> 00:06:17.605 Minus the input year, so let's now return both 93 00:06:20.100 --> 00:06:24.226 of the age and the years until retirement, 94 00:06:24.226 --> 00:06:27.362 and so we simply return an array with this data, 95 00:06:27.362 --> 00:06:31.195 so age and then 65 minus the age, so supposing 96 00:06:35.464 --> 00:06:38.964 that 65 is the age at which we can retire. 97 00:06:40.869 --> 00:06:44.852 It could be something different, but let's assume it's 65. 98 00:06:44.852 --> 00:06:49.205 We used that before, and so that's how we do it here. 99 00:06:49.205 --> 00:06:51.149 All right, so this returns an array. 100 00:06:51.149 --> 00:06:54.313 Now all we have to do is to use destructuring 101 00:06:54.313 --> 00:06:58.313 in order to store this into different variables. 102 00:06:59.264 --> 00:07:03.431 We want age and retirement, and this is, of course, 103 00:07:06.306 --> 00:07:10.473 the result of calling the function with, let's say, 1990. 104 00:07:14.099 --> 00:07:18.182 We're now gonna have two different return values. 105 00:07:19.734 --> 00:07:21.903 Let's just take a look at them, 106 00:07:21.903 --> 00:07:24.820 age and, of course, the retirement. 107 00:07:32.009 --> 00:07:35.292 Okay, so we have already used a variable called age. 108 00:07:35.292 --> 00:07:37.712 Let's just call it age2 here, 109 00:07:37.712 --> 00:07:40.430 and it really doesn't matter, right? 110 00:07:40.430 --> 00:07:43.846 Okay and now it works, so these are the two return values 111 00:07:43.846 --> 00:07:46.136 that come from our function, 112 00:07:46.136 --> 00:07:48.351 so destructuring is a good solution 113 00:07:48.351 --> 00:07:51.295 for this particular case, and we're actually gonna see 114 00:07:51.295 --> 00:07:53.511 more applications of destructuring, 115 00:07:53.511 --> 00:07:56.578 at least one more, later in the course. 116 00:07:56.578 --> 00:08:00.745 Stay tuned, and come with me right to the next lecture.