WEBVTT 1 00:00:01.270 --> 00:00:03.130 To finish this project 2 00:00:03.130 --> 00:00:06.800 let's now learn about the technique called refactoring 3 00:00:06.800 --> 00:00:10.363 in order to get rid of some of our duplicate code. 4 00:00:12.270 --> 00:00:15.210 So, as I said, by the end of the last lecture 5 00:00:15.210 --> 00:00:18.763 we have some repeated code in our project 6 00:00:18.763 --> 00:00:22.705 and more specifically where we can really see this 7 00:00:22.705 --> 00:00:26.510 is in these two scenarios where the guess is too high 8 00:00:26.510 --> 00:00:28.890 and where the guess is too low. 9 00:00:28.890 --> 00:00:32.290 So here this code is really almost the same 10 00:00:32.290 --> 00:00:34.570 as this code down here. 11 00:00:34.570 --> 00:00:38.990 The only thing that really changes is this string here 12 00:00:38.990 --> 00:00:42.480 so this message that we display if the guess is too high 13 00:00:42.480 --> 00:00:43.890 or if it's too low 14 00:00:43.890 --> 00:00:46.197 and so having a lot of duplicate code 15 00:00:46.197 --> 00:00:51.197 remember violates the don't repeat yourself principle. 16 00:00:51.240 --> 00:00:55.439 So the dry principle, so right now this 17 00:00:55.439 --> 00:00:59.350 all of this code here is not dry. 18 00:00:59.350 --> 00:01:01.460 Now, why is it actually so bad 19 00:01:01.460 --> 00:01:04.610 to have duplicate code you might ask? 20 00:01:04.610 --> 00:01:06.263 Well, one of the answers is that 21 00:01:06.263 --> 00:01:09.261 whenever we have duplicate code 22 00:01:09.261 --> 00:01:12.380 when we then want to change some functionality 23 00:01:12.380 --> 00:01:16.410 we have to change the same code in multiple places. 24 00:01:16.410 --> 00:01:18.470 For example, we might want to change 25 00:01:18.470 --> 00:01:21.890 the message when the player loses the game 26 00:01:21.890 --> 00:01:23.820 so this one here, right? 27 00:01:23.820 --> 00:01:27.220 And then we would have to change it here and here 28 00:01:27.220 --> 00:01:30.770 and in a small example like this, it's not a big problem 29 00:01:30.770 --> 00:01:33.090 but it can quickly become a nightmare 30 00:01:33.090 --> 00:01:35.910 for a bigger code base. 31 00:01:35.910 --> 00:01:39.780 So try to avoid duplicate code whenever you can 32 00:01:39.780 --> 00:01:42.490 however, when we first write the code 33 00:01:42.490 --> 00:01:46.930 then it's no big problem to start out with duplicate code 34 00:01:46.930 --> 00:01:49.240 and so that's why I did it like this here. 35 00:01:49.240 --> 00:01:52.010 That's why we have this duplicate code 36 00:01:52.010 --> 00:01:54.230 because I just wanted to make it work 37 00:01:54.230 --> 00:01:56.830 but then as we move on into project 38 00:01:56.830 --> 00:02:00.070 we can use a technique called refactoring 39 00:02:00.070 --> 00:02:04.140 and refactoring basically means to restructure the code 40 00:02:04.140 --> 00:02:06.670 but without changing how it works. 41 00:02:06.670 --> 00:02:10.210 So basically we do refactoring to improve the code 42 00:02:10.210 --> 00:02:13.260 and to eliminate duplicate code 43 00:02:13.260 --> 00:02:16.723 and so let's now start to refactor all of this code here 44 00:02:16.723 --> 00:02:19.350 that we just talked about before. 45 00:02:19.350 --> 00:02:23.760 So the first step of refactoring is to identify duplicate 46 00:02:23.760 --> 00:02:27.970 or almost duplicate code like we already have here. 47 00:02:27.970 --> 00:02:31.370 So this code here is almost the same as this one 48 00:02:32.450 --> 00:02:36.090 with this string here being the only exception 49 00:02:36.090 --> 00:02:37.350 and so what we're gonna do now 50 00:02:37.350 --> 00:02:42.350 is a way to eliminate health of this code here basically. 51 00:02:42.520 --> 00:02:45.050 So, how are we going to do that? 52 00:02:45.050 --> 00:02:49.000 Well, this first if block here checks 53 00:02:49.000 --> 00:02:51.320 if the guess is too high 54 00:02:51.320 --> 00:02:54.360 and this one checks if the guess is too low 55 00:02:54.360 --> 00:02:57.020 but in both cases what we're really doing 56 00:02:57.020 --> 00:02:59.810 is to check if the guess is different 57 00:02:59.810 --> 00:03:02.440 from the secret number, right? 58 00:03:02.440 --> 00:03:05.820 So whenever the guess is different from the secret number 59 00:03:05.820 --> 00:03:09.987 then all of this code here should get executed, right? 60 00:03:11.460 --> 00:03:15.100 Where the only thing that's changes is this string 61 00:03:15.100 --> 00:03:17.130 so instead of having one big block 62 00:03:17.130 --> 00:03:19.650 for the case where the guess is to high 63 00:03:19.650 --> 00:03:21.950 and one for when the guess is too low, 64 00:03:21.950 --> 00:03:25.070 let's just have one blog for the situation 65 00:03:25.070 --> 00:03:27.490 where the guess is different. 66 00:03:27.490 --> 00:03:31.080 So let me actually add a new else if block here 67 00:03:31.080 --> 00:03:34.253 and then we delete these two, okay? 68 00:03:36.460 --> 00:03:38.630 So here else if 69 00:03:42.230 --> 00:03:44.620 and then this moves down here 70 00:03:44.620 --> 00:03:49.620 and then when guess is wrong basically 71 00:03:51.740 --> 00:03:56.470 and so that means basically the opposite of this. 72 00:03:56.470 --> 00:03:58.540 So, here we have when the player wins, 73 00:03:58.540 --> 00:04:01.190 his guess equal secret number 74 00:04:01.190 --> 00:04:03.290 but here when new guess is wrong 75 00:04:03.290 --> 00:04:08.290 it means that guess is different from secret number 76 00:04:10.600 --> 00:04:13.650 and so now we can just take this code 77 00:04:13.650 --> 00:04:16.800 which is the same in the two blocks and we'll copy it 78 00:04:17.750 --> 00:04:19.480 and paste it here. 79 00:04:19.480 --> 00:04:22.210 So this is what should happen except 80 00:04:22.210 --> 00:04:25.060 that the two high should of course only happen 81 00:04:25.060 --> 00:04:30.050 when the guess is larger than the secret number. 82 00:04:30.050 --> 00:04:33.280 So now we still need a conditional to figure out 83 00:04:33.280 --> 00:04:38.030 if the guess is greater or lower than secret number. 84 00:04:38.030 --> 00:04:39.460 Now, what I'm going to do here 85 00:04:39.460 --> 00:04:42.240 is to actually use a turnery operator 86 00:04:42.240 --> 00:04:44.240 and so let me show you how 87 00:04:45.300 --> 00:04:50.300 so I will say when the guess is greater in the secret number 88 00:04:52.510 --> 00:04:56.350 then here the string should be too high 89 00:04:56.350 --> 00:05:00.350 and if not so else 90 00:05:00.350 --> 00:05:04.950 then it means that the guess is less than a secret number 91 00:05:04.950 --> 00:05:07.350 that's just the opposite right? 92 00:05:07.350 --> 00:05:09.630 And so then we want this string 93 00:05:11.130 --> 00:05:16.130 so copy that, put it here and that's it 94 00:05:16.630 --> 00:05:17.970 so I will give it a safe 95 00:05:19.320 --> 00:05:22.403 and now we can safely delete all of this here. 96 00:05:24.225 --> 00:05:28.840 Whoa, that's too much that's deleted 97 00:05:28.840 --> 00:05:31.140 or actually let me just comment all of it 98 00:05:32.180 --> 00:05:34.683 so that you can still keep it here as a reference. 99 00:05:35.650 --> 00:05:39.794 Now here's something is kind of wrong 100 00:05:39.794 --> 00:05:44.180 that's because I took away the closing curly brace here. 101 00:05:44.180 --> 00:05:49.180 So this one, and so now everything should be correct now 102 00:05:49.270 --> 00:05:52.980 so you'll see the red underline is gone there now 103 00:05:54.050 --> 00:05:57.070 and so let me explain again what we did here. 104 00:05:57.070 --> 00:06:01.240 So first we unified the two conditions that we had earlier 105 00:06:01.240 --> 00:06:02.890 where the guess was either a greater 106 00:06:02.890 --> 00:06:05.670 or larger than a secret number. 107 00:06:05.670 --> 00:06:07.170 Both of these basically mean 108 00:06:07.170 --> 00:06:10.400 that the guess is different than a secret number 109 00:06:10.400 --> 00:06:13.110 and so we just created a block for that 110 00:06:13.110 --> 00:06:15.490 because all of this code here is the same 111 00:06:15.490 --> 00:06:17.250 in both situations. 112 00:06:17.250 --> 00:06:19.760 The only thing that changes is the message 113 00:06:19.760 --> 00:06:21.500 that is displayed on a page 114 00:06:21.500 --> 00:06:25.490 and so here, we then basically determined that message 115 00:06:25.490 --> 00:06:27.440 with the turnery operator. 116 00:06:27.440 --> 00:06:29.213 So here is where we then asked 117 00:06:29.213 --> 00:06:33.020 if the guess is greater than the secret number 118 00:06:33.020 --> 00:06:37.460 and if it is then the text content here should be too high 119 00:06:37.460 --> 00:06:39.459 but if it's not, then the text content 120 00:06:39.459 --> 00:06:41.600 should become too low 121 00:06:42.590 --> 00:06:44.340 and remember that this works 122 00:06:44.340 --> 00:06:48.480 because the turnery operator is really an operator 123 00:06:48.480 --> 00:06:52.730 and so it will return basically a value, okay? 124 00:06:52.730 --> 00:06:56.380 So all of this here, all this operator will return a value 125 00:06:56.380 --> 00:06:59.560 either this one here or this one 126 00:06:59.560 --> 00:07:02.710 and so then that value is what will get stored 127 00:07:02.710 --> 00:07:06.023 in the text content of this message element. 128 00:07:07.140 --> 00:07:08.720 So let's now test this actually 129 00:07:11.480 --> 00:07:16.480 so that's too low, let's try 20 and that's too high. 130 00:07:18.480 --> 00:07:21.173 So it means that it's probably working, 131 00:07:22.820 --> 00:07:26.110 let's try it 17, let's try 19 132 00:07:27.400 --> 00:07:32.400 and so it's gotta be 18 and yes everything worked 133 00:07:32.640 --> 00:07:37.630 and so all refactoring here was indeed successful 134 00:07:37.630 --> 00:07:39.546 and I hope it made sense to you. 135 00:07:39.546 --> 00:07:41.160 You can just pause the video 136 00:07:41.160 --> 00:07:44.100 and review your code in case 137 00:07:44.100 --> 00:07:47.373 that it's not 100% clear yet, okay? 138 00:07:48.260 --> 00:07:52.290 All right, so we fixed that by simply condensing 139 00:07:52.290 --> 00:07:56.650 two versions of almost the same code into just one 140 00:07:56.650 --> 00:08:00.000 however, sometimes a good refactoring technique 141 00:08:00.000 --> 00:08:02.430 is also to create functions 142 00:08:02.430 --> 00:08:07.250 for example, we have the same code here in multiple places. 143 00:08:07.250 --> 00:08:10.120 So this code where we set the message 144 00:08:11.540 --> 00:08:14.580 so as I select this code here this code 145 00:08:14.580 --> 00:08:18.247 will highlight all the same versions of the code 146 00:08:18.247 --> 00:08:19.930 in the entire file. 147 00:08:19.930 --> 00:08:21.320 So you'll see that we have this 148 00:08:21.320 --> 00:08:25.100 document dot query selector message dot text content 149 00:08:25.100 --> 00:08:28.480 all over the place here, right? 150 00:08:28.480 --> 00:08:33.480 Well, at least one, two, three, four times down here 151 00:08:34.840 --> 00:08:37.350 yeah here so five times even. 152 00:08:37.350 --> 00:08:39.480 So that's a lot of duplicate code 153 00:08:39.480 --> 00:08:42.640 and the same is true for setting the number 154 00:08:43.530 --> 00:08:47.840 or for setting the score or also for example, 155 00:08:47.840 --> 00:08:52.180 for calculating this random secret number 156 00:08:52.180 --> 00:08:56.290 we have the same code here and also here 157 00:08:56.290 --> 00:08:57.770 and whenever that happens 158 00:08:57.770 --> 00:09:01.430 we can also refactor this same code into a function 159 00:09:01.430 --> 00:09:04.010 and then call the function in all the places 160 00:09:04.010 --> 00:09:06.390 where we have to duplicate code. 161 00:09:06.390 --> 00:09:09.750 So basically we can refactor functionality 162 00:09:09.750 --> 00:09:12.030 that we use over and over again 163 00:09:12.030 --> 00:09:16.470 into their own functions in order to make the code more dry. 164 00:09:16.470 --> 00:09:19.310 Now, I'm not gonna do that into all the examples 165 00:09:19.310 --> 00:09:20.680 that I just mentioned 166 00:09:20.680 --> 00:09:25.680 but I will do it with setting the message, text content. 167 00:09:25.830 --> 00:09:30.210 All right, so what I will do is to copy this okay? 168 00:09:32.420 --> 00:09:34.570 And then I will create a function out here 169 00:09:36.200 --> 00:09:39.830 and the function will be called display message. 170 00:09:42.240 --> 00:09:46.510 So it's a function and the parameter will be the message 171 00:09:50.120 --> 00:09:52.770 and then in the function block, all we will do 172 00:09:52.770 --> 00:09:56.020 is this repeated code. 173 00:09:56.020 --> 00:09:59.300 So setting the message and then we will set it 174 00:09:59.300 --> 00:10:02.513 equal to the message that is passed into the function. 175 00:10:04.370 --> 00:10:07.930 All right, and now to show you how it works 176 00:10:07.930 --> 00:10:09.823 well let's just use it to down here. 177 00:10:11.360 --> 00:10:14.760 So instead of this, let me comment it out 178 00:10:14.760 --> 00:10:18.210 I can now simply say display message 179 00:10:18.210 --> 00:10:20.910 and then with this string, 180 00:10:20.910 --> 00:10:23.973 so this string is now the argument, okay? 181 00:10:26.600 --> 00:10:30.500 And so this argument is what will become the message here 182 00:10:30.500 --> 00:10:33.430 in this function when I call it, right? 183 00:10:33.430 --> 00:10:37.940 And so then here we say document dot query selector 184 00:10:37.940 --> 00:10:40.670 for the message dot text content 185 00:10:40.670 --> 00:10:43.780 should be the message that we just passed in 186 00:10:43.780 --> 00:10:45.590 that makes sense, right? 187 00:10:45.590 --> 00:10:48.420 And so basically we took this coat here 188 00:10:49.360 --> 00:10:52.350 which is responsible for setting the message 189 00:10:52.350 --> 00:10:54.980 and put it into this display message function 190 00:10:54.980 --> 00:10:57.480 that we can now use everywhere instead 191 00:10:57.480 --> 00:10:59.330 of having this repetitive coat 192 00:11:00.510 --> 00:11:02.430 and just to show you that it works, 193 00:11:02.430 --> 00:11:05.560 let's now just actually do this. 194 00:11:05.560 --> 00:11:08.650 So clicking here without any content 195 00:11:08.650 --> 00:11:11.650 and so now we should see the no number displaying here 196 00:11:11.650 --> 00:11:16.363 just like before and indeed it works just fine. 197 00:11:17.870 --> 00:11:22.870 So let's not go ahead and replace all of these occurrences 198 00:11:24.442 --> 00:11:26.233 of this same coat. 199 00:11:27.390 --> 00:11:29.720 I will not delete them I will just comment them out 200 00:11:29.720 --> 00:11:32.560 but you can go ahead and delete them from your code base 201 00:11:32.560 --> 00:11:34.300 if you feel like it 202 00:11:34.300 --> 00:11:38.180 instead, let's just use always display message 203 00:11:38.180 --> 00:11:40.530 because debt is a lot cleaner. 204 00:11:40.530 --> 00:11:44.340 Also, this really shows what we're doing here 205 00:11:44.340 --> 00:11:45.790 so when we're reading the code 206 00:11:45.790 --> 00:11:48.980 we don't have to really understand what's happening. 207 00:11:48.980 --> 00:11:53.170 So if we try to read this code like one year from now 208 00:11:53.170 --> 00:11:55.980 and if we then come here we have to try to understand 209 00:11:55.980 --> 00:11:59.150 what all of this means here, right? 210 00:11:59.150 --> 00:12:01.470 But instead if we simply have a function called 211 00:12:01.470 --> 00:12:04.960 display message it's a lot easier to simply read the code 212 00:12:04.960 --> 00:12:09.960 and say okay, this year probably means to display a message 213 00:12:10.060 --> 00:12:13.120 and this here is gonna be the message, right? 214 00:12:13.120 --> 00:12:14.840 That's a lot easier to understand 215 00:12:14.840 --> 00:12:16.430 when you read the code later 216 00:12:17.680 --> 00:12:22.680 and that's also an important thing in web development. 217 00:12:22.930 --> 00:12:24.550 So here is another one 218 00:12:24.550 --> 00:12:28.170 and this is the one that we just refactored earlier 219 00:12:28.170 --> 00:12:30.226 so this one is gonna be a little bit different. 220 00:12:30.226 --> 00:12:34.810 So display message and now here we need the argument 221 00:12:34.810 --> 00:12:36.010 but that's not problem 222 00:12:36.010 --> 00:12:39.277 we can simply do the exact same thing that we did here. 223 00:12:39.277 --> 00:12:43.970 So let's just grab this and now we can comment this out 224 00:12:45.240 --> 00:12:49.497 and actually this one too and just paste it here, right? 225 00:12:52.512 --> 00:12:55.700 So now according to this condition here 226 00:12:55.700 --> 00:12:59.780 the argument will either be too high or too low 227 00:12:59.780 --> 00:13:02.950 because the result of this operator, once again 228 00:13:02.950 --> 00:13:06.958 will be either this first string here or this second string 229 00:13:06.958 --> 00:13:09.490 and so that will then be the argument 230 00:13:09.490 --> 00:13:13.193 and the message will then be displayed accordingly, okay? 231 00:13:16.030 --> 00:13:21.030 Here once again, display message you lost the game, okay? 232 00:13:25.916 --> 00:13:30.310 And down here, there's another one, yes here 233 00:13:31.300 --> 00:13:33.260 so display message 234 00:13:39.130 --> 00:13:41.070 and give it a safe 235 00:13:41.070 --> 00:13:43.230 and so now everything should work the same 236 00:13:46.660 --> 00:13:50.033 and yeah, that's awesome. 237 00:13:53.100 --> 00:13:56.010 Yeah, everything works just the same 238 00:13:56.010 --> 00:13:59.610 but our code is a little bit more dry now 239 00:13:59.610 --> 00:14:00.443 and as I said 240 00:14:00.443 --> 00:14:03.930 you could do the same for all the repetitive stuff here 241 00:14:03.930 --> 00:14:05.660 which I will actually not do here 242 00:14:05.660 --> 00:14:07.900 because that takes too much time. 243 00:14:07.900 --> 00:14:10.550 But you can of course have some fun 244 00:14:10.550 --> 00:14:14.350 and do it on your own, but there's really no need to do it. 245 00:14:14.350 --> 00:14:16.360 I just wanted to make a point here 246 00:14:16.360 --> 00:14:18.370 that this is a really important thing 247 00:14:18.370 --> 00:14:21.240 that we do when we write real code. 248 00:14:21.240 --> 00:14:23.380 So always keep refactoring in mind 249 00:14:23.380 --> 00:14:25.127 when you write your own code 250 00:14:25.127 --> 00:14:26.250 and of course we will do 251 00:14:26.250 --> 00:14:29.760 a lot of refactoring throughout this course. 252 00:14:29.760 --> 00:14:32.611 Anyway, with this, we finished this project, 253 00:14:32.611 --> 00:14:35.097 again, I really hope that you liked it 254 00:14:35.097 --> 00:14:38.130 and that you may be showed it to a friend or so 255 00:14:38.130 --> 00:14:41.030 and told him that you did it in this course 256 00:14:41.030 --> 00:14:43.490 and you know, how much fun it really is 257 00:14:43.490 --> 00:14:45.720 to build something like this. 258 00:14:45.720 --> 00:14:48.110 Next up, we have another project 259 00:14:48.110 --> 00:14:50.210 which is also gonna be really fun 260 00:14:50.210 --> 00:14:53.670 because we will build a real UI component 261 00:14:53.670 --> 00:14:56.360 and that's gonna be a modal window. 262 00:14:56.360 --> 00:15:00.040 So stay tuned for that one once you finished this one 263 00:15:00.040 --> 00:15:03.043 and really understood how all of it worked.