Original subtitles

1 1

So in this section, 2

2

we have talked about 3

3

modern JavaScript development practices, 4

4

such as tooling and modules. 5

5

Now since this is the section about 6

6

how to write modern JavaScript, 7

7

let's actually finish the section 8

8

by reviewing clean and modern JavaScript coding style, 9

9

and also take a brief look 10

10

at some functional JavaScript principles, 11

11

in the next video. 12

12

And this lecture is actually mostly going to be 13

13

a review lecture. 14

14

So, a lecture where I'm gonna bring together 15

15

all the clean and modern JavaScript techniques and practices 16

16

that I've been showing you throughout the course. 17

17

And so with this, 18

18

you will then have all this information in one place. 19

19

Then, in the next lecture, 20

20

we will actually bring some of these topics to practice 21

21

by fixing a bad coding example 22

22

that does not follow these practices. 23

23

But anyway, let's now get started. 24

24

So, one of the most important things when you code, 25

25

is that you should write readable code, 26

26

which basically means that you should write code 27

27

so that others can understand it, 28

28

and also, so that you can understand it yourself 29

29

in the future. 30

30

Also you should try to avoid writing too clever 31

31

and maybe over complicated solutions 32

32

that might make you feel really smart as a developer, 33

33

but which also might make your code very confusing 34

34

and unreadable. 35

35

And so in many situations it's best 36

36

to simply write the most straightforward solutions. 37

37

Another thing that's very important for readable code 38

38

is to give functions and variables, 39

39

very descriptive names. 40

40

So for variables, 41

41

you should name them according to what they contain, 42

42

and for functions 43

43

you should name them according to what they do. 44

44

And so by doing this, 45

45

you will make it really clear and obvious 46

46

to everyone what each variable is, 47

47

and what each function does. 48

48

Next, there are some more general rules 49

49

that you should follow in order to write 50

50

modern and clean code, 51

51

which are to use the DRY principle. 52

52

So don't repeat yourself, 53

53

which means that you should essentially refactor your code 54

54

whenever you can. 55

55

Also, you should not pollute the global namespace, 56

56

and instead, encapsulate your data into functions 57

57

or classes or modules. 58

58

Also, you shouldn't use var for declaring variables. 59

59

Right. 60

60

So I've mentioned this one many times in the course. 61

61

And so by now you already know 62

62

that you should always use const 63

63

and only if you want to change any variable, 64

64

then use let, but never var. 65

65

And finally, you should always use strong type checks. 66

66

So always use the triple equals 67

67

over the simple double equals, 68

68

which do not perform type checks. 69

69

Now about writing functions, 70

70

which is one of the most important things 71

71

that we do as JavaScript developers, 72

72

and the main rule that we should follow by writing functions 73

73

is that each function should usually only do one thing. 74

74

All right. 75

75

Now many times of course we will want to break that rule, 76

76

but in general it's good to keep this rule in mind, 77

77

so that you always write like small functions 78

78

which only do one thing, but do it really well. 79

79

All right? 80

80

Next, you shouldn't use more than three parameters 81

81

in a function. 82

82

And this actually goes in line with the previous guideline 83

83

because of course, if a function only does one thing, 84

84

then probably it doesn't need so many parameters 85

85

in the first place. 86

86

Also use default parameters in your functions 87

87

whenever that's possible, 88

88

and in general return the same data type as you received. 89

89

So for example, 90

90

if you receive two or three numbers 91

91

as an input to a function, 92

92

then probably you will want to return a number as well. 93

93

So that then makes more sense for when you consume, 94

94

so for when you use the function later. 95

95

And again, this is a rule that you can of course break, 96

96

but it's again good to keep this one in mind. 97

97

Finally, you can and should use arrow functions 98

98

whenever they make the code more readable. 99

99

Okay. 100

100

And here, many people actually have different opinions. 101

101

So some people started to use arrow functions everywhere, 102

102

and some people don't like them at all, 103

103

because they think that they completely make code unreadable 104

104

no matter when they're used. 105

105

But personally, I like to kind of follow a middle ground. 106

106

So I still use the more regular functions 107

107

in many situations. 108

108

But if arrow functions make the code more readable, 109

109

then I will totally use arrow functions. 110

110

And one great use case in my opinion 111

111

is in the callback functions of array methods. 112

112

And now after functions 113

113

our next topic is object-oriented programming. 114

114

And in my opinion in order to implement OOP in JavaScript, 115

115

you should now use ES6 classes. 116

116

And so that's also what I did after OOP section. 117

117

Right. 118

118

Now when designing your classes, 119

119

make sure that you encapsulate any data 120

120

that shouldn't be accessible from the outside, 121

121

so that you don't mutate that data from outside the class. 122

122

All right. 123

123

Now probably you will still need 124

124

to at least manipulate some data that's in the class, 125

125

but for that you should then implement a public API. 126

126

So basically a couple of methods that can then manipulate 127

127

that data exactly as you want that to happen. 128

128

And again we talked about all of this already before. 129

129

So this is really just a review of all these big topics 130

130

that we have been handling throughout all of this course. 131

131

Now as you implement your methods in your classes, 132

132

make sure that you implement chaining in all the methods 133

133

where it'll actually makes sense. 134

134

Because this can make your methods way easier to use, 135

135

not only for you, 136

136

but maybe also for other developers on your team. 137

137

So this is yet another great practice 138

138

when you're writing your classes. 139

139

Finally, one important thing to also mention here 140

140

is that in regular objects when you're writing methods, 141

141

then please don't use the arrow functions there. 142

142

Because by doing that, 143

143

you will not get access to the disk keywords of that object. 144

144

Remember, and so always avoid arrow functions, 145

145

even if you're not even using the disk keyword 146

146

in a method. 147

147

Because simply by getting into the habit 148

148

of avoiding arrow functions as methods in this situation, 149

149

you'll then not commit any mistakes ever. 150

150

All right. 151

151

Okay. 152

152

Next up, let's talk about avoiding nested code. 153

153

So writing nested code, 154

154

which basically means writing code inside of blocks 155

155

inside of other blocks is really really bad 156

156

for readable code. 157

157

And so we should avoid nested code at all costs. 158

158

And one great way of avoiding nested code 159

159

is to use guard clauses, 160

160

as we have been doing 161

161

over the last couple of sections, right. 162

162

So guard clauses basically simply means 163

163

to use an early return, in case some condition is not met. 164

164

Also you can use the ternary operator, 165

165

or even logical operators instead of an if statement. 166

166

Because the ternary operator of course 167

167

does not create a new code block, 168

168

while the if statement does. 169

169

Now if you really do need an if statement, 170

170

then instead of an if else statement, 171

171

you should use multiple ifs instead. 172

172

Because again, this will make code a lot more readable 173

173

than having to go through all these if and else if, 174

174

and else blocks. 175

175

So that's also another modern practice 176

176

that we start to see more and more 177

177

in modern JavaScript code basis. 178

178

Next, you should completely avoid any kind of loops. 179

179

And with that I mean any for loops. 180

180

So the for, and also the for of loops, 181

181

should be avoided if you want to avoid nested code. 182

182

And so instead, you can use array methods like a map, 183

183

filter and reduce. 184

184

And finally, you should avoid callback-based 185

185

asynchronous API's whenever you can. 186

186

And so that actually brings us to our next topic, 187

187

which is asynchronous code. 188

188

So for best readability, 189

189

always consume Promises using async/await 190

190

and not using the den and the catch methods. 191

191

Because these methods actually require callback functions, 192

192

which will then introduce even more nested code. 193

193

And so that's again, 194

194

something that we really want to avoid, all alright. 195

195

So these two go kind of together. 196

196

So avoiding callback based asynchronous API's, 197

197

and instead opting for using Promises 198

198

and then consume these Promises with async/await. 199

199

Now, something that's very important 200

200

is that whenever you can, 201

201

you should run Promises in parallel 202

202

using the Promise.all combinator function. 203

203

So when you have two Promises that can run at the same time, 204

204

so Promises that do not depend on each other, 205

205

then please run them in parallel 206

206

to make the application a little bit faster for your users. 207

207

And finally, always handle errors and Promise rejections. 208

208

So this is simply a best practice for clean code. 209

209

Now right. 210

210

So these are the main best practices for writing modern 211

211

and clean JavaScript code that I can think of. 212

212

And so let's now put some of these guidelines 213

213

that I gave you for clean and modern code in practice.