WEBVTT 0 00:00.520 --> 00:01.230 All right guys. 1 00:01.260 --> 00:08.910 So in this lesson I want to talk about ways in which we can reduce the amount of code and simplify our 2 00:08.910 --> 00:15.250 code here. And in large part that's going to involve something called the spread operator. 3 00:15.270 --> 00:20.490 So go ahead and get hold of the starting sandbox and fork your own copy. 4 00:20.490 --> 00:25.020 Now to begin I want to show you what the spread operator actually does. 5 00:25.020 --> 00:28.280 I'm going to write my code inside the index.js. 6 00:28.530 --> 00:37.230 So let's say that we had an array called citrus and it was equal to various citrus fruits such as lime, 7 00:37.230 --> 00:38.850 lemon and orange. 8 00:39.060 --> 00:44.510 And then I had another constant called fruits which is going to be another array. 9 00:44.730 --> 00:50.670 So let's say apple, banana and coconut. 10 00:50.670 --> 01:00.030 And what if what I want to do is to be able to add all of the contents in the citrus array into my fruits 11 01:00.030 --> 01:05.010 array at the end so I can put the lime into the coconut and shake it all up? 12 01:05.760 --> 01:13.500 Well in this case, what I could do is I could individually go through this array and push each of those 13 01:13.500 --> 01:15.330 items to my fruits array. 14 01:15.570 --> 01:18.810 But there's a much much easier way of doing this. 15 01:18.990 --> 01:26.620 I can simply use the ES6 spread operator which basically is just three full stops like this. 16 01:26.820 --> 01:31.730 And then I can add the name of the array that I want to expand into this position, 17 01:31.770 --> 01:41.270 so in my case it's citrus. And so now if I go ahead and log the value of my fruits array, then you'll 18 01:41.270 --> 01:44.280 see that it's equal to apple, banana, coconut, 19 01:44.310 --> 01:50.750 so the original array that I've typed out manually, and then it's got all of the rest of the items that 20 01:50.750 --> 01:59.450 came from the citrus array. and what it did is it took this citrus array, expanded it or spread it into 21 01:59.450 --> 02:09.380 individual items and added each of those items into this position where I specified ...citrus. 22 02:09.380 --> 02:15.410 Now you can of course change the position. So if you wanted apple to be the first item and then you 23 02:15.410 --> 02:20.150 wanted to insert the citrus array, then you can do it like this. 24 02:20.180 --> 02:27.230 And now when it gets printed you can see lime, lemon and orange now goes after apple and before banana. 25 02:27.470 --> 02:31.790 Now you can use the spread operator with objects as well. 26 02:31.790 --> 02:42.830 For example if I had a constant called fullName and it was set to equal to a first name being James 27 02:44.240 --> 02:55.160 last name is Bond and then I created another object called user. And I wanted to be able to insert the 28 02:55.220 --> 03:04.670 full name object into my user object, then I could simply do ... and then the name of the object 29 03:04.700 --> 03:08.300 I want to insert and then any other items that I want. 30 03:08.360 --> 03:23.360 So maybe I'd have an id and maybe I have a user name of jamesbond007 and now this user object 31 03:23.630 --> 03:31.700 is going to be comprised of all of the elements inside the full name object as well as any other ones 32 03:31.790 --> 03:37.160 that I've misspelt such as the id and user name. 33 03:37.160 --> 03:45.980 So let's go ahead and log the user object and you can see that this object has fName, lName, id and 34 03:45.980 --> 03:46.850 user name. 35 03:46.850 --> 03:56.150 Now notice how this is not the same as if we simply just inserted this object full name into this user 36 03:56.180 --> 03:57.050 object. 37 03:57.260 --> 04:03.620 What happens in this case is when we log the user object, you can see that we get a new object being 38 04:03.620 --> 04:06.870 nested inside our user object. 39 04:07.070 --> 04:12.740 And now we've got something with a key, a full name and a value of this object. 40 04:12.740 --> 04:13.860 This is not what we want. 41 04:13.880 --> 04:23.070 Instead what we wanted was to spread all of the items inside the full name object into our user object. 42 04:23.300 --> 04:32.840 And so they all end up in the same object like so. Now if this reminds you of maybe a pain point that 43 04:32.840 --> 04:37.830 we had in our previous app, then you are spot on. 44 04:37.910 --> 04:44.630 This is exactly what we're going to use to be able to simplify the code that we've got inside our handle 45 04:44.630 --> 04:51.620 Change which at the moment even though it looks very clear, it's a bit too long for what it's trying 46 04:51.620 --> 04:53.300 to achieve. 47 04:53.300 --> 04:56.180 What can we do here instead? 48 04:56.180 --> 05:06.480 Well instead of having all of these IF statements, we can simply delete all of it and then we can return 49 05:06.750 --> 05:15.690 an object where we use the spread operator to add in the previous value of the object so be it the last 50 05:15.690 --> 05:20.870 name property or the first name property or the email property, whatever it is that we had previously. 51 05:21.570 --> 05:29.310 And then we're going to add in a new value for whichever name of input that got passed in and the value 52 05:29.340 --> 05:32.340 that the user typed in. At this point 53 05:32.340 --> 05:38.490 you might think this code would just work as it is. But if we actually tried to run this and open up 54 05:38.490 --> 05:48.960 my console so I can see my state hooks, notice how if I start writing first name nothing actually happens. 55 05:48.960 --> 05:54.590 But it seems like something is being added with a key of name. 56 05:54.810 --> 05:55.920 What's going on here? 57 05:56.580 --> 06:04.830 Well, it's literally interpreting this as the fact that you want to create a new key value pair where 58 06:04.830 --> 06:12.290 the key is the word name. And instead this part is actually saying is declared but it's never read. 59 06:12.390 --> 06:17.730 So we're not actually able to tap into this right here. 60 06:17.740 --> 06:22.380 Now you might think that the solution is maybe we'll just get straight to the point. We will say event 61 06:22.410 --> 06:31.230 .target.name. And despite my warnings about never using the event inside a set state, you'll notice 62 06:31.230 --> 06:33.700 that this doesn't even work. 63 06:33.720 --> 06:41.610 So whatever it is that we're typing here, it's being interpreted as a string instead of the value of 64 06:41.640 --> 06:43.560 a particular variable or property. 65 06:44.250 --> 06:53.160 What we have to do instead is we need to add the value that we want inside and an array syntax. 66 06:53.160 --> 07:03.120 And notice how as soon as I do that then almost magically everything starts working exactly the way 67 07:03.120 --> 07:04.730 that it's supposed to. 68 07:05.010 --> 07:07.930 But what's actually happening behind the scenes? 69 07:07.980 --> 07:11.890 Well notice there's a lot of people who are wondering the same thing 70 07:11.940 --> 07:17.280 and the best place to find all the other wandering souls is of course Stack Overflow. 71 07:17.700 --> 07:24.640 So in this case this guy has a key which is a variable and it holds a string value. 72 07:24.660 --> 07:32.010 He wants to use that string as the key when he creates a new object. But it doesn't seem to work because 73 07:32.070 --> 07:37.420 it's just taking the word key instead of the actual value that's stored inside key, 74 07:37.440 --> 07:44.250 so exactly the same thing that we're experiencing. And down here you'll notice a highly upvoted answer 75 07:44.280 --> 07:49.320 telling you how you might do this before ES6. 76 07:49.350 --> 07:57.270 Well you could create a new object and then use this a array syntax to be able to set it as the key 77 07:57.600 --> 07:58.920 of the object. 78 07:58.920 --> 08:05.460 But luckily for us because we're using Babel, because we're using React and because we are now no longer 79 08:05.460 --> 08:14.220 in before 2018, we can simply just use this new feature where we add a set of square brackets in front 80 08:14.640 --> 08:21.600 and then put our key variable inside to get the actual value of the variable rather than for JavaScript 81 08:21.600 --> 08:25.980 to just interprete it as a literal string. 82 08:26.010 --> 08:31.790 So I'm going to link to the Stack Overflow question and if you're curious then have a read about it. 83 08:32.070 --> 08:36.550 But essentially this is going to be the syntax that you're going to get used to. 84 08:36.600 --> 08:41.380 We've got the name that comes from our event.target .name. 85 08:41.640 --> 08:48.030 And we're simply adding a set of square brackets in order to get hold of the value of this variable 86 08:48.420 --> 08:51.650 rather than using it like what we did here 87 08:51.670 --> 08:58.500 when we create object laterals where we just add a string as the key. 88 08:58.970 --> 09:04.810 So if you wanted to, you could in fact shorten this code even further. 89 09:05.030 --> 09:12.500 For one, we could get rid of this return right? Because we only have one thing being returned in here 90 09:13.100 --> 09:18.690 which is this single object, we could actually get rid of this outer curly brace, 91 09:18.800 --> 09:29.870 this corresponding closing brace, this semicolon and only end up with this object like so. But of course 92 09:30.260 --> 09:35.630 Javascript gets confused because it thinks that this is the body of your function. 93 09:35.660 --> 09:40.100 So instead we have to wrap it inside a set of parentheses to tell it, 94 09:40.100 --> 09:49.030 'Nope this is actually an object' and we're just using very very terse syntax to try and achieve this. 95 09:49.160 --> 09:54.230 Now even though this is very very short, we're now down to two lines. 96 09:54.440 --> 10:00.730 I don't actually really like this syntax because it's kind of confusing as to what's going on. 97 10:00.800 --> 10:06.770 There's so many curly braces, so many of these parentheses, it's a bit confusing. 98 10:06.770 --> 10:12.220 So I think simplifying code is great when it keeps its meaning. 99 10:12.230 --> 10:19.790 So what I would prefer is to keep it like so, where we have a function that we're passing over to set 100 10:19.790 --> 10:20.690 Contact, 101 10:20.930 --> 10:28.070 it gets hold of the previous value and returns a Javascript object that includes all of the items from 102 10:28.070 --> 10:36.170 the previous Javascript object the previous value and then adding on the new key value pair with the 103 10:36.170 --> 10:44.730 key being the name of the event.target and the value being the new value that's been typed in. This 104 10:44.820 --> 10:48.280 even as it is is going to take some getting used to. 105 10:48.300 --> 10:50.570 So have a play around with the code 106 10:50.670 --> 10:55.920 and once you already head over to the next lesson where I've got a challenge for you to try and solidify 107 10:55.920 --> 10:56.790 this even more.