Original subtitles

1 1

To finish this project 2

2

let's now learn about the technique called refactoring 3

3

in order to get rid of some of our duplicate code. 4

4

So, as I said, by the end of the last lecture 5

5

we have some repeated code in our project 6

6

and more specifically where we can really see this 7

7

is in these two scenarios where the guess is too high 8

8

and where the guess is too low. 9

9

So here this code is really almost the same 10

10

as this code down here. 11

11

The only thing that really changes is this string here 12

12

so this message that we display if the guess is too high 13

13

or if it's too low 14

14

and so having a lot of duplicate code 15

15

remember violates the don't repeat yourself principle. 16

16

So the dry principle, so right now this 17

17

all of this code here is not dry. 18

18

Now, why is it actually so bad 19

19

to have duplicate code you might ask? 20

20

Well, one of the answers is that 21

21

whenever we have duplicate code 22

22

when we then want to change some functionality 23

23

we have to change the same code in multiple places. 24

24

For example, we might want to change 25

25

the message when the player loses the game 26

26

so this one here, right? 27

27

And then we would have to change it here and here 28

28

and in a small example like this, it's not a big problem 29

29

but it can quickly become a nightmare 30

30

for a bigger code base. 31

31

So try to avoid duplicate code whenever you can 32

32

however, when we first write the code 33

33

then it's no big problem to start out with duplicate code 34

34

and so that's why I did it like this here. 35

35

That's why we have this duplicate code 36

36

because I just wanted to make it work 37

37

but then as we move on into project 38

38

we can use a technique called refactoring 39

39

and refactoring basically means to restructure the code 40

40

but without changing how it works. 41

41

So basically we do refactoring to improve the code 42

42

and to eliminate duplicate code 43

43

and so let's now start to refactor all of this code here 44

44

that we just talked about before. 45

45

So the first step of refactoring is to identify duplicate 46

46

or almost duplicate code like we already have here. 47

47

So this code here is almost the same as this one 48

48

with this string here being the only exception 49

49

and so what we're gonna do now 50

50

is a way to eliminate health of this code here basically. 51

51

So, how are we going to do that? 52

52

Well, this first if block here checks 53

53

if the guess is too high 54

54

and this one checks if the guess is too low 55

55

but in both cases what we're really doing 56

56

is to check if the guess is different 57

57

from the secret number, right? 58

58

So whenever the guess is different from the secret number 59

59

then all of this code here should get executed, right? 60

60

Where the only thing that's changes is this string 61

61

so instead of having one big block 62

62

for the case where the guess is to high 63

63

and one for when the guess is too low, 64

64

let's just have one blog for the situation 65

65

where the guess is different. 66

66

So let me actually add a new else if block here 67

67

and then we delete these two, okay? 68

68

So here else if 69

69

and then this moves down here 70

70

and then when guess is wrong basically 71

71

and so that means basically the opposite of this. 72

72

So, here we have when the player wins, 73

73

his guess equal secret number 74

74

but here when new guess is wrong 75

75

it means that guess is different from secret number 76

76

and so now we can just take this code 77

77

which is the same in the two blocks and we'll copy it 78

78

and paste it here. 79

79

So this is what should happen except 80

80

that the two high should of course only happen 81

81

when the guess is larger than the secret number. 82

82

So now we still need a conditional to figure out 83

83

if the guess is greater or lower than secret number. 84

84

Now, what I'm going to do here 85

85

is to actually use a turnery operator 86

86

and so let me show you how 87

87

so I will say when the guess is greater in the secret number 88

88

then here the string should be too high 89

89

and if not so else 90

90

then it means that the guess is less than a secret number 91

91

that's just the opposite right? 92

92

And so then we want this string 93

93

so copy that, put it here and that's it 94

94

so I will give it a safe 95

95

and now we can safely delete all of this here. 96

96

Whoa, that's too much that's deleted 97

97

or actually let me just comment all of it 98

98

so that you can still keep it here as a reference. 99

99

Now here's something is kind of wrong 100

100

that's because I took away the closing curly brace here. 101

101

So this one, and so now everything should be correct now 102

102

so you'll see the red underline is gone there now 103

103

and so let me explain again what we did here. 104

104

So first we unified the two conditions that we had earlier 105

105

where the guess was either a greater 106

106

or larger than a secret number. 107

107

Both of these basically mean 108

108

that the guess is different than a secret number 109

109

and so we just created a block for that 110

110

because all of this code here is the same 111

111

in both situations. 112

112

The only thing that changes is the message 113

113

that is displayed on a page 114

114

and so here, we then basically determined that message 115

115

with the turnery operator. 116

116

So here is where we then asked 117

117

if the guess is greater than the secret number 118

118

and if it is then the text content here should be too high 119

119

but if it's not, then the text content 120

120

should become too low 121

121

and remember that this works 122

122

because the turnery operator is really an operator 123

123

and so it will return basically a value, okay? 124

124

So all of this here, all this operator will return a value 125

125

either this one here or this one 126

126

and so then that value is what will get stored 127

127

in the text content of this message element. 128

128

So let's now test this actually 129

129

so that's too low, let's try 20 and that's too high. 130

130

So it means that it's probably working, 131

131

let's try it 17, let's try 19 132

132

and so it's gotta be 18 and yes everything worked 133

133

and so all refactoring here was indeed successful 134

134

and I hope it made sense to you. 135

135

You can just pause the video 136

136

and review your code in case 137

137

that it's not 100% clear yet, okay? 138

138

All right, so we fixed that by simply condensing 139

139

two versions of almost the same code into just one 140

140

however, sometimes a good refactoring technique 141

141

is also to create functions 142

142

for example, we have the same code here in multiple places. 143

143

So this code where we set the message 144

144

so as I select this code here this code 145

145

will highlight all the same versions of the code 146

146

in the entire file. 147

147

So you'll see that we have this 148

148

document dot query selector message dot text content 149

149

all over the place here, right? 150

150

Well, at least one, two, three, four times down here 151

151

yeah here so five times even. 152

152

So that's a lot of duplicate code 153

153

and the same is true for setting the number 154

154

or for setting the score or also for example, 155

155

for calculating this random secret number 156

156

we have the same code here and also here 157

157

and whenever that happens 158

158

we can also refactor this same code into a function 159

159

and then call the function in all the places 160

160

where we have to duplicate code. 161

161

So basically we can refactor functionality 162

162

that we use over and over again 163

163

into their own functions in order to make the code more dry. 164

164

Now, I'm not gonna do that into all the examples 165

165

that I just mentioned 166

166

but I will do it with setting the message, text content. 167

167

All right, so what I will do is to copy this okay? 168

168

And then I will create a function out here 169

169

and the function will be called display message. 170

170

So it's a function and the parameter will be the message 171

171

and then in the function block, all we will do 172

172

is this repeated code. 173

173

So setting the message and then we will set it 174

174

equal to the message that is passed into the function. 175

175

All right, and now to show you how it works 176

176

well let's just use it to down here. 177

177

So instead of this, let me comment it out 178

178

I can now simply say display message 179

179

and then with this string, 180

180

so this string is now the argument, okay? 181

181

And so this argument is what will become the message here 182

182

in this function when I call it, right? 183

183

And so then here we say document dot query selector 184

184

for the message dot text content 185

185

should be the message that we just passed in 186

186

that makes sense, right? 187

187

And so basically we took this coat here 188

188

which is responsible for setting the message 189

189

and put it into this display message function 190

190

that we can now use everywhere instead 191

191

of having this repetitive coat 192

192

and just to show you that it works, 193

193

let's now just actually do this. 194

194

So clicking here without any content 195

195

and so now we should see the no number displaying here 196

196

just like before and indeed it works just fine. 197

197

So let's not go ahead and replace all of these occurrences 198

198

of this same coat. 199

199

I will not delete them I will just comment them out 200

200

but you can go ahead and delete them from your code base 201

201

if you feel like it 202

202

instead, let's just use always display message 203

203

because debt is a lot cleaner. 204

204

Also, this really shows what we're doing here 205

205

so when we're reading the code 206

206

we don't have to really understand what's happening. 207

207

So if we try to read this code like one year from now 208

208

and if we then come here we have to try to understand 209

209

what all of this means here, right? 210

210

But instead if we simply have a function called 211

211

display message it's a lot easier to simply read the code 212

212

and say okay, this year probably means to display a message 213

213

and this here is gonna be the message, right? 214

214

That's a lot easier to understand 215

215

when you read the code later 216

216

and that's also an important thing in web development. 217

217

So here is another one 218

218

and this is the one that we just refactored earlier 219

219

so this one is gonna be a little bit different. 220

220

So display message and now here we need the argument 221

221

but that's not problem 222

222

we can simply do the exact same thing that we did here. 223

223

So let's just grab this and now we can comment this out 224

224

and actually this one too and just paste it here, right? 225

225

So now according to this condition here 226

226

the argument will either be too high or too low 227

227

because the result of this operator, once again 228

228

will be either this first string here or this second string 229

229

and so that will then be the argument 230

230

and the message will then be displayed accordingly, okay? 231

231

Here once again, display message you lost the game, okay? 232

232

And down here, there's another one, yes here 233

233

so display message 234

234

and give it a safe 235

235

and so now everything should work the same 236

236

and yeah, that's awesome. 237

237

Yeah, everything works just the same 238

238

but our code is a little bit more dry now 239

239

and as I said 240

240

you could do the same for all the repetitive stuff here 241

241

which I will actually not do here 242

242

because that takes too much time. 243

243

But you can of course have some fun 244

244

and do it on your own, but there's really no need to do it. 245

245

I just wanted to make a point here 246

246

that this is a really important thing 247

247

that we do when we write real code. 248

248

So always keep refactoring in mind 249

249

when you write your own code 250

250

and of course we will do 251

251

a lot of refactoring throughout this course. 252

252

Anyway, with this, we finished this project, 253

253

again, I really hope that you liked it 254

254

and that you may be showed it to a friend or so 255

255

and told him that you did it in this course 256

256

and you know, how much fun it really is 257

257

to build something like this. 258

258

Next up, we have another project 259

259

which is also gonna be really fun 260

260

because we will build a real UI component 261

261

and that's gonna be a modal window. 262

262

So stay tuned for that one once you finished this one 263

263

and really understood how all of it worked.