Original subtitles

1 1

So, we just reviewed 2

2

and also implemented some clean 3

3

and modern JavaScript practices. 4

4

However, there is currently a major trend 5

5

and shift to something called declarative code 6

6

and functional programming in JavaScript. 7

7

And so, let's now take some time to look at what declarative 8

8

and functional programming actually are. 9

9

So, there are two fundamentally different ways 10

10

of writing code in programming, 11

11

which we also call paradigms. 12

12

And these two paradigms, 13

13

are imperative code and declarative code. 14

14

Now, whenever we write imperative code, 15

15

we basically need to explain to the computer 16

16

how to do a certain things. 17

17

So, basically, we need to explain every single step 18

18

that the computer needs to follow 19

19

in order to achieve a certain result. 20

20

But, this might sound a little bit abstract, 21

21

so let's try a more real world example. 22

22

So, let's say that we want someone to bake a cake for us. 23

23

And so, if we would do that in an imperative way, 24

24

we would tell the person exactly the step by step recipe 25

25

that they would have to follow in order to bake that cake, 26

26

am I right? 27

27

So again, it is telling every single step 28

28

that the person has to follow in order to achieve a result. 29

29

And now bringing that back into code, 30

30

here in this code example, 31

31

we are trying to double the R array. 32

32

And so, this loop that I have here, 33

33

is a purely imperative way of writing that. 34

34

So, here we are telling the computer step by step, 35

35

to create an empty array to create a counter 36

36

that starts at zero, then to increase that counter 37

37

until we reach the length of the original array, 38

38

and then how exactly to store the new result 39

39

in each new position of the array. 40

40

So, there's a lot of steps 41

41

that we really give the computer here, 42

42

in order for us to achieve the result 43

43

of doubling that R array. 44

44

Okay, so that's imperative programming, 45

45

but on the other hand, we also have declarative programming, 46

46

where the programmer tells the computer only what to do. 47

47

And so, when we write declarative code, 48

48

we simply describe the way that the computer should achieve 49

49

a certain result. 50

50

But the how it should do it, 51

51

so basically, the step by step instructions, 52

52

they get abstracted away, so we do not care about them. 53

53

And going back to our cake example here, 54

54

the declarative way of instructing someone to bake the cake 55

55

would be to simply describe that cake to the person, 56

56

and then the person would have to come up 57

57

with the step by step recipe on their own. 58

58

So, simply describing the task, 59

59

and the result that should be achieved 60

60

is the declarative way of doing it, all right? 61

61

And now coming back to the code example of duplicating 62

62

the values in an array, 63

63

this is how we do it in the declarative way. 64

64

So, we have R array, and then we simply tell JavaScript, 65

65

that it should map the values in the R array to a new array, 66

66

and each of these values should be multiplied by two. 67

67

And so, if you compare this code example, 68

68

with the one on the left, 69

69

then you will really see that in this example, 70

70

all we are doing is describing the way 71

71

that the computer should achieve the result 72

72

that we are looking for. 73

73

We are simply telling it what to do, which in this case, 74

74

is to simply map the original array onto a new array 75

75

and doubling all the elements. 76

76

But, all these super detailed steps 77

77

that we have on the left side, like creating an empty array 78

78

and initializing a counter, 79

79

all of these steps have been abstracted away, 80

80

because we don't really care about them, all right? 81

81

And this is pretty important to understand, 82

82

because more and more this is how modern JavaScript code 83

83

is actually written. 84

84

So, the difference between imperative and declarative 85

85

is not just some theoretical difference. 86

86

So, the declarative paradigm is actually a really big 87

87

and popular programming paradigm, 88

88

which has even given rise to a sub paradigm called, 89

89

functional programming. 90

90

And functional programming, 91

91

is basically a declarative paradigm, 92

92

which is based on the idea of writing software, 93

93

simply by combining multiple so called pure functions, 94

94

while avoiding side effects and mutating data. 95

95

And actually, functional programming 96

96

and writing declarative code, 97

97

has now basically become the modern way of writing code 98

98

in the JavaScript world. 99

99

So, you will see declarative and functional code everywhere. 100

100

And, in fact, we have even been using it all along, 101

101

but without really knowing that this style 102

102

was called declarative, and functional, all right. 103

103

But let's quickly go back to the definition 104

104

of functional programming, and talk about what side effects 105

105

and pure functions are. 106

106

So, a side effect is basically simply a modification 107

107

of any data that's outside of a function. 108

108

So, for example, mutating any variable that is external 109

109

to the function is causing a side effect. 110

110

So basically, any variable that is outside of the scope 111

111

of the function, all right? 112

112

Now, data does not only refer to variables, 113

113

so for example, logging stuff to the console, 114

114

or also changing something in the DOM, 115

115

is also causing side effects. 116

116

Now next up, a pure function, 117

117

is a function without side effects. 118

118

So, basically a function that does not mutate 119

119

any external variables, and that does also not depend 120

120

on any external variables. 121

121

So basically, if we give the same inputs to a pure function, 122

122

it will always return the same output 123

123

and again, that's because it does not depend 124

124

on any external variables, 125

125

and it also does not manipulate them. 126

126

And finally, if we look again, at our definition here, 127

127

we also see that functional programming 128

128

is about avoiding mutating data, 129

129

and we do that by using something called immutability. 130

130

So, in functional programming state, 131

131

which also means basically data is never modified. 132

132

So, let's say that we have some application, 133

133

and we have an object there to keep track of all the data 134

134

that we need in an application. 135

135

And so that we usually called state, 136

136

and so again, in functional programming, 137

137

that state is never modified. 138

138

Instead, what we will do is to copy that object, 139

139

so that state, and then it is that copy that is mutated, 140

140

and can then be returned, 141

141

but the original state is never touched, okay? 142

142

So, that's what it means for the state being immutable, 143

143

and the big upside of immutability is that, 144

144

it makes it so much easier to keep track 145

145

of how the data flows through our entire application. 146

146

And so ultimately, that will allow us to write better code 147

147

with less bugs, and code that is also more readable, 148

148

which overall, is the entire goal 149

149

of using functional programming in the first place. 150

150

Now, I'm telling you all this, 151

151

not with the goal of turning you 152

152

into a functional programmer, 153

153

because that would actually be a very hard task, 154

154

because this is really just a very high level introduction 155

155

to what functional programming actually is. 156

156

But behind the surface, 157

157

functional programming is a huge paradigm, 158

158

which is really difficult to implement in practice. 159

159

But it is still very important that you know, 160

160

some of these principles, such as side effects, 161

161

pure functions, and immutability, 162

162

because many of the popular libraries, 163

163

such as React or Redux, are actually built 164

164

around all of these principles. 165

165

So for example, in React, 166

166

the state is also completely immutable, 167

167

and so if you ever want to learn something like React, 168

168

you will need to know about these concepts 169

169

in order to use it properly. 170

170

However, some principles such as pure functions, 171

171

or side effects, can actually be a bit easier to implement 172

172

into our own code. 173

173

So, what I'm trying to say is that, 174

174

we can actually mix imperative and declarative programming 175

175

in our own codes, we don't have to go 100% declarative. 176

176

Or in other words, we don't have to go 100% in the direction 177

177

of making our code completely functional. 178

178

And so again, we can already start using, 179

179

some of the functional programming techniques 180

180

in our own code base. 181

181

So for example, you can try to avoid data mutations 182

182

as often as possible. 183

183

And of course, this will not always be possible, 184

184

but it's also not really necessary. 185

185

So these are mainly and are just suggestions, 186

186

but which will still create more readable 187

187

and overall better and cleaner code. 188

188

So, another thing that you can do is to always prefer, 189

189

built in methods or functions that do not produce 190

190

side effects over the ones that do, 191

191

and this is really important for data transformations. 192

192

So whenever you want to do that, 193

193

you should use a method such as Map, Filter and Reduce. 194

194

So, this is the functional and modern way 195

195

of doing data transformations, and many times, 196

196

this is actually the first contact that many people have, 197

197

with functional programming. 198

198

So, Map, Filter and Reduce are actually present 199

199

in all functional programming languages, 200

200

and they are very important to implement a functional code 201

201

into more declarative code in our code. 202

202

And finally, you can also try to avoid side effects 203

203

into functions that you write yourself. 204

204

And again, this is of course, not always possible, 205

205

and also not always necessary. 206

206

So, we will never be able to avoid all side effects 207

207

in applications, because of course, at some point, 208

208

the application needs to do something. 209

209

So, it needs to display something on the DOM, 210

210

or log something to the console, 211

211

or really create some side effect, okay? 212

212

But you can still try to think about this, 213

213

and to start incorporating side effects 214

214

more into your own code. 215

215

And now to finish, let's come back to declarative syntax, 216

216

because functional programming is only a part of using 217

217

and writing declarative code. 218

218

So, in order to write code that is more declarative, 219

219

you should use array and object destructuring 220

220

whenever that's possible. 221

221

You should also use the spread operator, 222

222

the ternary operator, and also template literals 223

223

whenever that is possible, because if you think about it, 224

224

then all of these four ways of writing code, 225

225

actually makes the code more declarative. 226

226

So, these operators are more about telling the code 227

227

what to do, and not exactly the steps 228

228

that it should take, right? 229

229

And that's, again, true for all these four pieces of syntax. 230

230

All right, so let's now actually continue working 231

231

on the code example from last lecture and implement, 232

232

some of these functional programming principles in practice.