Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,270 --> 00:00:03,130 To finish this project 2 2 00:00:03,130 --> 00:00:06,800 let's now learn about the technique called refactoring 3 3 00:00:06,800 --> 00:00:10,363 in order to get rid of some of our duplicate code. 4 4 00:00:12,270 --> 00:00:15,210 So, as I said, by the end of the last lecture 5 5 00:00:15,210 --> 00:00:18,763 we have some repeated code in our project 6 6 00:00:18,763 --> 00:00:22,705 and more specifically where we can really see this 7 7 00:00:22,705 --> 00:00:26,510 is in these two scenarios where the guess is too high 8 8 00:00:26,510 --> 00:00:28,890 and where the guess is too low. 9 9 00:00:28,890 --> 00:00:32,290 So here this code is really almost the same 10 10 00:00:32,290 --> 00:00:34,570 as this code down here. 11 11 00:00:34,570 --> 00:00:38,990 The only thing that really changes is this string here 12 12 00:00:38,990 --> 00:00:42,480 so this message that we display if the guess is too high 13 13 00:00:42,480 --> 00:00:43,890 or if it's too low 14 14 00:00:43,890 --> 00:00:46,197 and so having a lot of duplicate code 15 15 00:00:46,197 --> 00:00:51,197 remember violates the don't repeat yourself principle. 16 16 00:00:51,240 --> 00:00:55,439 So the dry principle, so right now this 17 17 00:00:55,439 --> 00:00:59,350 all of this code here is not dry. 18 18 00:00:59,350 --> 00:01:01,460 Now, why is it actually so bad 19 19 00:01:01,460 --> 00:01:04,610 to have duplicate code you might ask? 20 20 00:01:04,610 --> 00:01:06,263 Well, one of the answers is that 21 21 00:01:06,263 --> 00:01:09,261 whenever we have duplicate code 22 22 00:01:09,261 --> 00:01:12,380 when we then want to change some functionality 23 23 00:01:12,380 --> 00:01:16,410 we have to change the same code in multiple places. 24 24 00:01:16,410 --> 00:01:18,470 For example, we might want to change 25 25 00:01:18,470 --> 00:01:21,890 the message when the player loses the game 26 26 00:01:21,890 --> 00:01:23,820 so this one here, right? 27 27 00:01:23,820 --> 00:01:27,220 And then we would have to change it here and here 28 28 00:01:27,220 --> 00:01:30,770 and in a small example like this, it's not a big problem 29 29 00:01:30,770 --> 00:01:33,090 but it can quickly become a nightmare 30 30 00:01:33,090 --> 00:01:35,910 for a bigger code base. 31 31 00:01:35,910 --> 00:01:39,780 So try to avoid duplicate code whenever you can 32 32 00:01:39,780 --> 00:01:42,490 however, when we first write the code 33 33 00:01:42,490 --> 00:01:46,930 then it's no big problem to start out with duplicate code 34 34 00:01:46,930 --> 00:01:49,240 and so that's why I did it like this here. 35 35 00:01:49,240 --> 00:01:52,010 That's why we have this duplicate code 36 36 00:01:52,010 --> 00:01:54,230 because I just wanted to make it work 37 37 00:01:54,230 --> 00:01:56,830 but then as we move on into project 38 38 00:01:56,830 --> 00:02:00,070 we can use a technique called refactoring 39 39 00:02:00,070 --> 00:02:04,140 and refactoring basically means to restructure the code 40 40 00:02:04,140 --> 00:02:06,670 but without changing how it works. 41 41 00:02:06,670 --> 00:02:10,210 So basically we do refactoring to improve the code 42 42 00:02:10,210 --> 00:02:13,260 and to eliminate duplicate code 43 43 00:02:13,260 --> 00:02:16,723 and so let's now start to refactor all of this code here 44 44 00:02:16,723 --> 00:02:19,350 that we just talked about before. 45 45 00:02:19,350 --> 00:02:23,760 So the first step of refactoring is to identify duplicate 46 46 00:02:23,760 --> 00:02:27,970 or almost duplicate code like we already have here. 47 47 00:02:27,970 --> 00:02:31,370 So this code here is almost the same as this one 48 48 00:02:32,450 --> 00:02:36,090 with this string here being the only exception 49 49 00:02:36,090 --> 00:02:37,350 and so what we're gonna do now 50 50 00:02:37,350 --> 00:02:42,350 is a way to eliminate health of this code here basically. 51 51 00:02:42,520 --> 00:02:45,050 So, how are we going to do that? 52 52 00:02:45,050 --> 00:02:49,000 Well, this first if block here checks 53 53 00:02:49,000 --> 00:02:51,320 if the guess is too high 54 54 00:02:51,320 --> 00:02:54,360 and this one checks if the guess is too low 55 55 00:02:54,360 --> 00:02:57,020 but in both cases what we're really doing 56 56 00:02:57,020 --> 00:02:59,810 is to check if the guess is different 57 57 00:02:59,810 --> 00:03:02,440 from the secret number, right? 58 58 00:03:02,440 --> 00:03:05,820 So whenever the guess is different from the secret number 59 59 00:03:05,820 --> 00:03:09,987 then all of this code here should get executed, right? 60 60 00:03:11,460 --> 00:03:15,100 Where the only thing that's changes is this string 61 61 00:03:15,100 --> 00:03:17,130 so instead of having one big block 62 62 00:03:17,130 --> 00:03:19,650 for the case where the guess is to high 63 63 00:03:19,650 --> 00:03:21,950 and one for when the guess is too low, 64 64 00:03:21,950 --> 00:03:25,070 let's just have one blog for the situation 65 65 00:03:25,070 --> 00:03:27,490 where the guess is different. 66 66 00:03:27,490 --> 00:03:31,080 So let me actually add a new else if block here 67 67 00:03:31,080 --> 00:03:34,253 and then we delete these two, okay? 68 68 00:03:36,460 --> 00:03:38,630 So here else if 69 69 00:03:42,230 --> 00:03:44,620 and then this moves down here 70 70 00:03:44,620 --> 00:03:49,620 and then when guess is wrong basically 71 71 00:03:51,740 --> 00:03:56,470 and so that means basically the opposite of this. 72 72 00:03:56,470 --> 00:03:58,540 So, here we have when the player wins, 73 73 00:03:58,540 --> 00:04:01,190 his guess equal secret number 74 74 00:04:01,190 --> 00:04:03,290 but here when new guess is wrong 75 75 00:04:03,290 --> 00:04:08,290 it means that guess is different from secret number 76 76 00:04:10,600 --> 00:04:13,650 and so now we can just take this code 77 77 00:04:13,650 --> 00:04:16,800 which is the same in the two blocks and we'll copy it 78 78 00:04:17,750 --> 00:04:19,480 and paste it here. 79 79 00:04:19,480 --> 00:04:22,210 So this is what should happen except 80 80 00:04:22,210 --> 00:04:25,060 that the two high should of course only happen 81 81 00:04:25,060 --> 00:04:30,050 when the guess is larger than the secret number. 82 82 00:04:30,050 --> 00:04:33,280 So now we still need a conditional to figure out 83 83 00:04:33,280 --> 00:04:38,030 if the guess is greater or lower than secret number. 84 84 00:04:38,030 --> 00:04:39,460 Now, what I'm going to do here 85 85 00:04:39,460 --> 00:04:42,240 is to actually use a turnery operator 86 86 00:04:42,240 --> 00:04:44,240 and so let me show you how 87 87 00:04:45,300 --> 00:04:50,300 so I will say when the guess is greater in the secret number 88 88 00:04:52,510 --> 00:04:56,350 then here the string should be too high 89 89 00:04:56,350 --> 00:05:00,350 and if not so else 90 90 00:05:00,350 --> 00:05:04,950 then it means that the guess is less than a secret number 91 91 00:05:04,950 --> 00:05:07,350 that's just the opposite right? 92 92 00:05:07,350 --> 00:05:09,630 And so then we want this string 93 93 00:05:11,130 --> 00:05:16,130 so copy that, put it here and that's it 94 94 00:05:16,630 --> 00:05:17,970 so I will give it a safe 95 95 00:05:19,320 --> 00:05:22,403 and now we can safely delete all of this here. 96 96 00:05:24,225 --> 00:05:28,840 Whoa, that's too much that's deleted 97 97 00:05:28,840 --> 00:05:31,140 or actually let me just comment all of it 98 98 00:05:32,180 --> 00:05:34,683 so that you can still keep it here as a reference. 99 99 00:05:35,650 --> 00:05:39,794 Now here's something is kind of wrong 100 100 00:05:39,794 --> 00:05:44,180 that's because I took away the closing curly brace here. 101 101 00:05:44,180 --> 00:05:49,180 So this one, and so now everything should be correct now 102 102 00:05:49,270 --> 00:05:52,980 so you'll see the red underline is gone there now 103 103 00:05:54,050 --> 00:05:57,070 and so let me explain again what we did here. 104 104 00:05:57,070 --> 00:06:01,240 So first we unified the two conditions that we had earlier 105 105 00:06:01,240 --> 00:06:02,890 where the guess was either a greater 106 106 00:06:02,890 --> 00:06:05,670 or larger than a secret number. 107 107 00:06:05,670 --> 00:06:07,170 Both of these basically mean 108 108 00:06:07,170 --> 00:06:10,400 that the guess is different than a secret number 109 109 00:06:10,400 --> 00:06:13,110 and so we just created a block for that 110 110 00:06:13,110 --> 00:06:15,490 because all of this code here is the same 111 111 00:06:15,490 --> 00:06:17,250 in both situations. 112 112 00:06:17,250 --> 00:06:19,760 The only thing that changes is the message 113 113 00:06:19,760 --> 00:06:21,500 that is displayed on a page 114 114 00:06:21,500 --> 00:06:25,490 and so here, we then basically determined that message 115 115 00:06:25,490 --> 00:06:27,440 with the turnery operator. 116 116 00:06:27,440 --> 00:06:29,213 So here is where we then asked 117 117 00:06:29,213 --> 00:06:33,020 if the guess is greater than the secret number 118 118 00:06:33,020 --> 00:06:37,460 and if it is then the text content here should be too high 119 119 00:06:37,460 --> 00:06:39,459 but if it's not, then the text content 120 120 00:06:39,459 --> 00:06:41,600 should become too low 121 121 00:06:42,590 --> 00:06:44,340 and remember that this works 122 122 00:06:44,340 --> 00:06:48,480 because the turnery operator is really an operator 123 123 00:06:48,480 --> 00:06:52,730 and so it will return basically a value, okay? 124 124 00:06:52,730 --> 00:06:56,380 So all of this here, all this operator will return a value 125 125 00:06:56,380 --> 00:06:59,560 either this one here or this one 126 126 00:06:59,560 --> 00:07:02,710 and so then that value is what will get stored 127 127 00:07:02,710 --> 00:07:06,023 in the text content of this message element. 128 128 00:07:07,140 --> 00:07:08,720 So let's now test this actually 129 129 00:07:11,480 --> 00:07:16,480 so that's too low, let's try 20 and that's too high. 130 130 00:07:18,480 --> 00:07:21,173 So it means that it's probably working, 131 131 00:07:22,820 --> 00:07:26,110 let's try it 17, let's try 19 132 132 00:07:27,400 --> 00:07:32,400 and so it's gotta be 18 and yes everything worked 133 133 00:07:32,640 --> 00:07:37,630 and so all refactoring here was indeed successful 134 134 00:07:37,630 --> 00:07:39,546 and I hope it made sense to you. 135 135 00:07:39,546 --> 00:07:41,160 You can just pause the video 136 136 00:07:41,160 --> 00:07:44,100 and review your code in case 137 137 00:07:44,100 --> 00:07:47,373 that it's not 100% clear yet, okay? 138 138 00:07:48,260 --> 00:07:52,290 All right, so we fixed that by simply condensing 139 139 00:07:52,290 --> 00:07:56,650 two versions of almost the same code into just one 140 140 00:07:56,650 --> 00:08:00,000 however, sometimes a good refactoring technique 141 141 00:08:00,000 --> 00:08:02,430 is also to create functions 142 142 00:08:02,430 --> 00:08:07,250 for example, we have the same code here in multiple places. 143 143 00:08:07,250 --> 00:08:10,120 So this code where we set the message 144 144 00:08:11,540 --> 00:08:14,580 so as I select this code here this code 145 145 00:08:14,580 --> 00:08:18,247 will highlight all the same versions of the code 146 146 00:08:18,247 --> 00:08:19,930 in the entire file. 147 147 00:08:19,930 --> 00:08:21,320 So you'll see that we have this 148 148 00:08:21,320 --> 00:08:25,100 document dot query selector message dot text content 149 149 00:08:25,100 --> 00:08:28,480 all over the place here, right? 150 150 00:08:28,480 --> 00:08:33,480 Well, at least one, two, three, four times down here 151 151 00:08:34,840 --> 00:08:37,350 yeah here so five times even. 152 152 00:08:37,350 --> 00:08:39,480 So that's a lot of duplicate code 153 153 00:08:39,480 --> 00:08:42,640 and the same is true for setting the number 154 154 00:08:43,530 --> 00:08:47,840 or for setting the score or also for example, 155 155 00:08:47,840 --> 00:08:52,180 for calculating this random secret number 156 156 00:08:52,180 --> 00:08:56,290 we have the same code here and also here 157 157 00:08:56,290 --> 00:08:57,770 and whenever that happens 158 158 00:08:57,770 --> 00:09:01,430 we can also refactor this same code into a function 159 159 00:09:01,430 --> 00:09:04,010 and then call the function in all the places 160 160 00:09:04,010 --> 00:09:06,390 where we have to duplicate code. 161 161 00:09:06,390 --> 00:09:09,750 So basically we can refactor functionality 162 162 00:09:09,750 --> 00:09:12,030 that we use over and over again 163 163 00:09:12,030 --> 00:09:16,470 into their own functions in order to make the code more dry. 164 164 00:09:16,470 --> 00:09:19,310 Now, I'm not gonna do that into all the examples 165 165 00:09:19,310 --> 00:09:20,680 that I just mentioned 166 166 00:09:20,680 --> 00:09:25,680 but I will do it with setting the message, text content. 167 167 00:09:25,830 --> 00:09:30,210 All right, so what I will do is to copy this okay? 168 168 00:09:32,420 --> 00:09:34,570 And then I will create a function out here 169 169 00:09:36,200 --> 00:09:39,830 and the function will be called display message. 170 170 00:09:42,240 --> 00:09:46,510 So it's a function and the parameter will be the message 171 171 00:09:50,120 --> 00:09:52,770 and then in the function block, all we will do 172 172 00:09:52,770 --> 00:09:56,020 is this repeated code. 173 173 00:09:56,020 --> 00:09:59,300 So setting the message and then we will set it 174 174 00:09:59,300 --> 00:10:02,513 equal to the message that is passed into the function. 175 175 00:10:04,370 --> 00:10:07,930 All right, and now to show you how it works 176 176 00:10:07,930 --> 00:10:09,823 well let's just use it to down here. 177 177 00:10:11,360 --> 00:10:14,760 So instead of this, let me comment it out 178 178 00:10:14,760 --> 00:10:18,210 I can now simply say display message 179 179 00:10:18,210 --> 00:10:20,910 and then with this string, 180 180 00:10:20,910 --> 00:10:23,973 so this string is now the argument, okay? 181 181 00:10:26,600 --> 00:10:30,500 And so this argument is what will become the message here 182 182 00:10:30,500 --> 00:10:33,430 in this function when I call it, right? 183 183 00:10:33,430 --> 00:10:37,940 And so then here we say document dot query selector 184 184 00:10:37,940 --> 00:10:40,670 for the message dot text content 185 185 00:10:40,670 --> 00:10:43,780 should be the message that we just passed in 186 186 00:10:43,780 --> 00:10:45,590 that makes sense, right? 187 187 00:10:45,590 --> 00:10:48,420 And so basically we took this coat here 188 188 00:10:49,360 --> 00:10:52,350 which is responsible for setting the message 189 189 00:10:52,350 --> 00:10:54,980 and put it into this display message function 190 190 00:10:54,980 --> 00:10:57,480 that we can now use everywhere instead 191 191 00:10:57,480 --> 00:10:59,330 of having this repetitive coat 192 192 00:11:00,510 --> 00:11:02,430 and just to show you that it works, 193 193 00:11:02,430 --> 00:11:05,560 let's now just actually do this. 194 194 00:11:05,560 --> 00:11:08,650 So clicking here without any content 195 195 00:11:08,650 --> 00:11:11,650 and so now we should see the no number displaying here 196 196 00:11:11,650 --> 00:11:16,363 just like before and indeed it works just fine. 197 197 00:11:17,870 --> 00:11:22,870 So let's not go ahead and replace all of these occurrences 198 198 00:11:24,442 --> 00:11:26,233 of this same coat. 199 199 00:11:27,390 --> 00:11:29,720 I will not delete them I will just comment them out 200 200 00:11:29,720 --> 00:11:32,560 but you can go ahead and delete them from your code base 201 201 00:11:32,560 --> 00:11:34,300 if you feel like it 202 202 00:11:34,300 --> 00:11:38,180 instead, let's just use always display message 203 203 00:11:38,180 --> 00:11:40,530 because debt is a lot cleaner. 204 204 00:11:40,530 --> 00:11:44,340 Also, this really shows what we're doing here 205 205 00:11:44,340 --> 00:11:45,790 so when we're reading the code 206 206 00:11:45,790 --> 00:11:48,980 we don't have to really understand what's happening. 207 207 00:11:48,980 --> 00:11:53,170 So if we try to read this code like one year from now 208 208 00:11:53,170 --> 00:11:55,980 and if we then come here we have to try to understand 209 209 00:11:55,980 --> 00:11:59,150 what all of this means here, right? 210 210 00:11:59,150 --> 00:12:01,470 But instead if we simply have a function called 211 211 00:12:01,470 --> 00:12:04,960 display message it's a lot easier to simply read the code 212 212 00:12:04,960 --> 00:12:09,960 and say okay, this year probably means to display a message 213 213 00:12:10,060 --> 00:12:13,120 and this here is gonna be the message, right? 214 214 00:12:13,120 --> 00:12:14,840 That's a lot easier to understand 215 215 00:12:14,840 --> 00:12:16,430 when you read the code later 216 216 00:12:17,680 --> 00:12:22,680 and that's also an important thing in web development. 217 217 00:12:22,930 --> 00:12:24,550 So here is another one 218 218 00:12:24,550 --> 00:12:28,170 and this is the one that we just refactored earlier 219 219 00:12:28,170 --> 00:12:30,226 so this one is gonna be a little bit different. 220 220 00:12:30,226 --> 00:12:34,810 So display message and now here we need the argument 221 221 00:12:34,810 --> 00:12:36,010 but that's not problem 222 222 00:12:36,010 --> 00:12:39,277 we can simply do the exact same thing that we did here. 223 223 00:12:39,277 --> 00:12:43,970 So let's just grab this and now we can comment this out 224 224 00:12:45,240 --> 00:12:49,497 and actually this one too and just paste it here, right? 225 225 00:12:52,512 --> 00:12:55,700 So now according to this condition here 226 226 00:12:55,700 --> 00:12:59,780 the argument will either be too high or too low 227 227 00:12:59,780 --> 00:13:02,950 because the result of this operator, once again 228 228 00:13:02,950 --> 00:13:06,958 will be either this first string here or this second string 229 229 00:13:06,958 --> 00:13:09,490 and so that will then be the argument 230 230 00:13:09,490 --> 00:13:13,193 and the message will then be displayed accordingly, okay? 231 231 00:13:16,030 --> 00:13:21,030 Here once again, display message you lost the game, okay? 232 232 00:13:25,916 --> 00:13:30,310 And down here, there's another one, yes here 233 233 00:13:31,300 --> 00:13:33,260 so display message 234 234 00:13:39,130 --> 00:13:41,070 and give it a safe 235 235 00:13:41,070 --> 00:13:43,230 and so now everything should work the same 236 236 00:13:46,660 --> 00:13:50,033 and yeah, that's awesome. 237 237 00:13:53,100 --> 00:13:56,010 Yeah, everything works just the same 238 238 00:13:56,010 --> 00:13:59,610 but our code is a little bit more dry now 239 239 00:13:59,610 --> 00:14:00,443 and as I said 240 240 00:14:00,443 --> 00:14:03,930 you could do the same for all the repetitive stuff here 241 241 00:14:03,930 --> 00:14:05,660 which I will actually not do here 242 242 00:14:05,660 --> 00:14:07,900 because that takes too much time. 243 243 00:14:07,900 --> 00:14:10,550 But you can of course have some fun 244 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 245 00:14:14,350 --> 00:14:16,360 I just wanted to make a point here 246 246 00:14:16,360 --> 00:14:18,370 that this is a really important thing 247 247 00:14:18,370 --> 00:14:21,240 that we do when we write real code. 248 248 00:14:21,240 --> 00:14:23,380 So always keep refactoring in mind 249 249 00:14:23,380 --> 00:14:25,127 when you write your own code 250 250 00:14:25,127 --> 00:14:26,250 and of course we will do 251 251 00:14:26,250 --> 00:14:29,760 a lot of refactoring throughout this course. 252 252 00:14:29,760 --> 00:14:32,611 Anyway, with this, we finished this project, 253 253 00:14:32,611 --> 00:14:35,097 again, I really hope that you liked it 254 254 00:14:35,097 --> 00:14:38,130 and that you may be showed it to a friend or so 255 255 00:14:38,130 --> 00:14:41,030 and told him that you did it in this course 256 256 00:14:41,030 --> 00:14:43,490 and you know, how much fun it really is 257 257 00:14:43,490 --> 00:14:45,720 to build something like this. 258 258 00:14:45,720 --> 00:14:48,110 Next up, we have another project 259 259 00:14:48,110 --> 00:14:50,210 which is also gonna be really fun 260 260 00:14:50,210 --> 00:14:53,670 because we will build a real UI component 261 261 00:14:53,670 --> 00:14:56,360 and that's gonna be a modal window. 262 262 00:14:56,360 --> 00:15:00,040 So stay tuned for that one once you finished this one 263 263 00:15:00,040 --> 00:15:03,043 and really understood how all of it worked. 23330