0 1 00:00:00,520 --> 00:00:01,230 All right guys. 1 2 00:00:01,260 --> 00: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 3 00:00:08,910 --> 00:00:15,250 code here. And in large part that's going to involve something called the spread operator. 3 4 00:00:15,270 --> 00:00:20,490 So go ahead and get hold of the starting sandbox and fork your own copy. 4 5 00:00:20,490 --> 00:00:25,020 Now to begin I want to show you what the spread operator actually does. 5 6 00:00:25,020 --> 00:00:28,280 I'm going to write my code inside the index.js. 6 7 00:00:28,530 --> 00: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 8 00:00:37,230 --> 00:00:38,850 lemon and orange. 8 9 00:00:39,060 --> 00:00:44,510 And then I had another constant called fruits which is going to be another array. 9 10 00:00:44,730 --> 00:00:50,670 So let's say apple, banana and coconut. 10 11 00:00:50,670 --> 00: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 12 00:01:00,030 --> 00:01:05,010 array at the end so I can put the lime into the coconut and shake it all up? 12 13 00:01:05,760 --> 00: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 14 00:01:13,500 --> 00:01:15,330 items to my fruits array. 14 15 00:01:15,570 --> 00:01:18,810 But there's a much much easier way of doing this. 15 16 00:01:18,990 --> 00:01:26,620 I can simply use the ES6 spread operator which basically is just three full stops like this. 16 17 00:01:26,820 --> 00:01:31,730 And then I can add the name of the array that I want to expand into this position, 17 18 00:01:31,770 --> 00: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 19 00:01:41,270 --> 00:01:44,280 see that it's equal to apple, banana, coconut, 19 20 00:01:44,310 --> 00: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 21 00:01:50,750 --> 00: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 22 00:01:59,450 --> 00:02:09,380 individual items and added each of those items into this position where I specified ...citrus. 22 23 00:02:09,380 --> 00: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 24 00:02:15,410 --> 00:02:20,150 wanted to insert the citrus array, then you can do it like this. 24 25 00:02:20,180 --> 00:02:27,230 And now when it gets printed you can see lime, lemon and orange now goes after apple and before banana. 25 26 00:02:27,470 --> 00:02:31,790 Now you can use the spread operator with objects as well. 26 27 00:02:31,790 --> 00: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 28 00:02:44,240 --> 00: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 29 00:02:55,220 --> 00:03:04,670 full name object into my user object, then I could simply do ... and then the name of the object 29 30 00:03:04,700 --> 00:03:08,300 I want to insert and then any other items that I want. 30 31 00:03:08,360 --> 00: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 32 00:03:23,630 --> 00: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 33 00:03:31,790 --> 00:03:37,160 that I've misspelt such as the id and user name. 33 34 00:03:37,160 --> 00: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 35 00:03:45,980 --> 00:03:46,850 user name. 35 36 00:03:46,850 --> 00: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 37 00:03:56,180 --> 00:03:57,050 object. 37 38 00:03:57,260 --> 00: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 39 00:04:03,620 --> 00:04:06,870 nested inside our user object. 39 40 00:04:07,070 --> 00:04:12,740 And now we've got something with a key, a full name and a value of this object. 40 41 00:04:12,740 --> 00:04:13,860 This is not what we want. 41 42 00:04:13,880 --> 00:04:23,070 Instead what we wanted was to spread all of the items inside the full name object into our user object. 42 43 00:04:23,300 --> 00: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 44 00:04:32,840 --> 00:04:37,830 we had in our previous app, then you are spot on. 44 45 00:04:37,910 --> 00: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 46 00:04:44,630 --> 00: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 47 00:04:51,620 --> 00:04:53,300 to achieve. 47 48 00:04:53,300 --> 00:04:56,180 What can we do here instead? 48 49 00:04:56,180 --> 00: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 50 00:05:06,750 --> 00: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 51 00:05:15,690 --> 00:05:20,870 name property or the first name property or the email property, whatever it is that we had previously. 51 52 00:05:21,570 --> 00: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 53 00:05:29,340 --> 00:05:32,340 that the user typed in. At this point 53 54 00:05:32,340 --> 00: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 55 00:05:38,490 --> 00:05:48,960 my console so I can see my state hooks, notice how if I start writing first name nothing actually happens. 55 56 00:05:48,960 --> 00:05:54,590 But it seems like something is being added with a key of name. 56 57 00:05:54,810 --> 00:05:55,920 What's going on here? 57 58 00:05:56,580 --> 00:06:04,830 Well, it's literally interpreting this as the fact that you want to create a new key value pair where 58 59 00:06:04,830 --> 00:06:12,290 the key is the word name. And instead this part is actually saying is declared but it's never read. 59 60 00:06:12,390 --> 00:06:17,730 So we're not actually able to tap into this right here. 60 61 00:06:17,740 --> 00: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 62 00:06:22,410 --> 00:06:31,230 .target.name. And despite my warnings about never using the event inside a set state, you'll notice 62 63 00:06:31,230 --> 00:06:33,700 that this doesn't even work. 63 64 00:06:33,720 --> 00: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 65 00:06:41,640 --> 00:06:43,560 a particular variable or property. 65 66 00:06:44,250 --> 00: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 67 00:06:53,160 --> 00:07:03,120 And notice how as soon as I do that then almost magically everything starts working exactly the way 67 68 00:07:03,120 --> 00:07:04,730 that it's supposed to. 68 69 00:07:05,010 --> 00:07:07,930 But what's actually happening behind the scenes? 69 70 00:07:07,980 --> 00:07:11,890 Well notice there's a lot of people who are wondering the same thing 70 71 00:07:11,940 --> 00:07:17,280 and the best place to find all the other wandering souls is of course Stack Overflow. 71 72 00:07:17,700 --> 00:07:24,640 So in this case this guy has a key which is a variable and it holds a string value. 72 73 00:07:24,660 --> 00: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 74 00:07:32,070 --> 00:07:37,420 it's just taking the word key instead of the actual value that's stored inside key, 74 75 00:07:37,440 --> 00:07:44,250 so exactly the same thing that we're experiencing. And down here you'll notice a highly upvoted answer 75 76 00:07:44,280 --> 00:07:49,320 telling you how you might do this before ES6. 76 77 00:07:49,350 --> 00: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 78 00:07:57,600 --> 00:07:58,920 of the object. 78 79 00:07:58,920 --> 00: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 80 00:08:05,460 --> 00: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 81 00:08:14,640 --> 00:08:21,600 and then put our key variable inside to get the actual value of the variable rather than for JavaScript 81 82 00:08:21,600 --> 00:08:25,980 to just interprete it as a literal string. 82 83 00:08:26,010 --> 00: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 84 00:08:32,070 --> 00:08:36,550 But essentially this is going to be the syntax that you're going to get used to. 84 85 00:08:36,600 --> 00:08:41,380 We've got the name that comes from our event.target .name. 85 86 00:08:41,640 --> 00: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 87 00:08:48,420 --> 00:08:51,650 rather than using it like what we did here 87 88 00:08:51,670 --> 00:08:58,500 when we create object laterals where we just add a string as the key. 88 89 00:08:58,970 --> 00:09:04,810 So if you wanted to, you could in fact shorten this code even further. 89 90 00:09:05,030 --> 00:09:12,500 For one, we could get rid of this return right? Because we only have one thing being returned in here 90 91 00:09:13,100 --> 00:09:18,690 which is this single object, we could actually get rid of this outer curly brace, 91 92 00:09:18,800 --> 00:09:29,870 this corresponding closing brace, this semicolon and only end up with this object like so. But of course 92 93 00:09:30,260 --> 00:09:35,630 Javascript gets confused because it thinks that this is the body of your function. 93 94 00:09:35,660 --> 00:09:40,100 So instead we have to wrap it inside a set of parentheses to tell it, 94 95 00:09:40,100 --> 00:09:49,030 'Nope this is actually an object' and we're just using very very terse syntax to try and achieve this. 95 96 00:09:49,160 --> 00:09:54,230 Now even though this is very very short, we're now down to two lines. 96 97 00:09:54,440 --> 00:10:00,730 I don't actually really like this syntax because it's kind of confusing as to what's going on. 97 98 00:10:00,800 --> 00:10:06,770 There's so many curly braces, so many of these parentheses, it's a bit confusing. 98 99 00:10:06,770 --> 00:10:12,220 So I think simplifying code is great when it keeps its meaning. 99 100 00:10:12,230 --> 00: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 101 00:10:19,790 --> 00:10:20,690 Contact, 101 102 00:10:20,930 --> 00:10:28,070 it gets hold of the previous value and returns a Javascript object that includes all of the items from 102 103 00:10:28,070 --> 00:10:36,170 the previous Javascript object the previous value and then adding on the new key value pair with the 103 104 00:10:36,170 --> 00: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 105 00:10:44,820 --> 00:10:48,280 even as it is is going to take some getting used to. 105 106 00:10:48,300 --> 00:10:50,570 So have a play around with the code 106 107 00:10:50,670 --> 00: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 108 00:10:55,920 --> 00:10:56,790 this even more.