Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,490 --> 00:00:03,130
So, we just reviewed
2
2
00:00:03,130 --> 00:00:05,670
and also implemented some clean
3
3
00:00:05,670 --> 00:00:08,590
and modern JavaScript practices.
4
4
00:00:08,590 --> 00:00:12,030
However, there is currently a major trend
5
5
00:00:12,030 --> 00:00:15,610
and shift to something called declarative code
6
6
00:00:15,610 --> 00:00:18,670
and functional programming in JavaScript.
7
7
00:00:18,670 --> 00:00:22,780
And so, let's now take some time to look at what declarative
8
8
00:00:22,780 --> 00:00:25,393
and functional programming actually are.
9
9
00:00:26,530 --> 00:00:29,710
So, there are two fundamentally different ways
10
10
00:00:29,710 --> 00:00:32,090
of writing code in programming,
11
11
00:00:32,090 --> 00:00:34,540
which we also call paradigms.
12
12
00:00:34,540 --> 00:00:36,120
And these two paradigms,
13
13
00:00:36,120 --> 00:00:39,323
are imperative code and declarative code.
14
14
00:00:40,240 --> 00:00:43,210
Now, whenever we write imperative code,
15
15
00:00:43,210 --> 00:00:45,560
we basically need to explain to the computer
16
16
00:00:45,560 --> 00:00:48,660
how to do a certain things.
17
17
00:00:48,660 --> 00:00:52,570
So, basically, we need to explain every single step
18
18
00:00:52,570 --> 00:00:54,840
that the computer needs to follow
19
19
00:00:54,840 --> 00:00:57,770
in order to achieve a certain result.
20
20
00:00:57,770 --> 00:01:00,770
But, this might sound a little bit abstract,
21
21
00:01:00,770 --> 00:01:03,740
so let's try a more real world example.
22
22
00:01:03,740 --> 00:01:08,460
So, let's say that we want someone to bake a cake for us.
23
23
00:01:08,460 --> 00:01:11,880
And so, if we would do that in an imperative way,
24
24
00:01:11,880 --> 00:01:16,150
we would tell the person exactly the step by step recipe
25
25
00:01:16,150 --> 00:01:20,350
that they would have to follow in order to bake that cake,
26
26
00:01:20,350 --> 00:01:21,630
am I right?
27
27
00:01:21,630 --> 00:01:24,690
So again, it is telling every single step
28
28
00:01:24,690 --> 00:01:29,150
that the person has to follow in order to achieve a result.
29
29
00:01:29,150 --> 00:01:31,940
And now bringing that back into code,
30
30
00:01:31,940 --> 00:01:33,750
here in this code example,
31
31
00:01:33,750 --> 00:01:37,000
we are trying to double the R array.
32
32
00:01:37,000 --> 00:01:39,480
And so, this loop that I have here,
33
33
00:01:39,480 --> 00:01:43,420
is a purely imperative way of writing that.
34
34
00:01:43,420 --> 00:01:46,500
So, here we are telling the computer step by step,
35
35
00:01:46,500 --> 00:01:50,700
to create an empty array to create a counter
36
36
00:01:50,700 --> 00:01:54,220
that starts at zero, then to increase that counter
37
37
00:01:54,220 --> 00:01:57,780
until we reach the length of the original array,
38
38
00:01:57,780 --> 00:02:01,850
and then how exactly to store the new result
39
39
00:02:01,850 --> 00:02:04,230
in each new position of the array.
40
40
00:02:04,230 --> 00:02:05,860
So, there's a lot of steps
41
41
00:02:05,860 --> 00:02:08,190
that we really give the computer here,
42
42
00:02:08,190 --> 00:02:10,790
in order for us to achieve the result
43
43
00:02:10,790 --> 00:02:13,003
of doubling that R array.
44
44
00:02:13,960 --> 00:02:17,100
Okay, so that's imperative programming,
45
45
00:02:17,100 --> 00:02:20,670
but on the other hand, we also have declarative programming,
46
46
00:02:20,670 --> 00:02:25,190
where the programmer tells the computer only what to do.
47
47
00:02:25,190 --> 00:02:28,110
And so, when we write declarative code,
48
48
00:02:28,110 --> 00:02:31,930
we simply describe the way that the computer should achieve
49
49
00:02:31,930 --> 00:02:33,570
a certain result.
50
50
00:02:33,570 --> 00:02:35,590
But the how it should do it,
51
51
00:02:35,590 --> 00:02:38,460
so basically, the step by step instructions,
52
52
00:02:38,460 --> 00:02:43,030
they get abstracted away, so we do not care about them.
53
53
00:02:43,030 --> 00:02:45,807
And going back to our cake example here,
54
54
00:02:45,807 --> 00:02:50,070
the declarative way of instructing someone to bake the cake
55
55
00:02:50,070 --> 00:02:54,230
would be to simply describe that cake to the person,
56
56
00:02:54,230 --> 00:02:56,400
and then the person would have to come up
57
57
00:02:56,400 --> 00:02:59,900
with the step by step recipe on their own.
58
58
00:02:59,900 --> 00:03:02,250
So, simply describing the task,
59
59
00:03:02,250 --> 00:03:04,640
and the result that should be achieved
60
60
00:03:04,640 --> 00:03:09,010
is the declarative way of doing it, all right?
61
61
00:03:09,010 --> 00:03:12,270
And now coming back to the code example of duplicating
62
62
00:03:12,270 --> 00:03:14,060
the values in an array,
63
63
00:03:14,060 --> 00:03:17,510
this is how we do it in the declarative way.
64
64
00:03:17,510 --> 00:03:21,410
So, we have R array, and then we simply tell JavaScript,
65
65
00:03:21,410 --> 00:03:26,130
that it should map the values in the R array to a new array,
66
66
00:03:26,130 --> 00:03:30,270
and each of these values should be multiplied by two.
67
67
00:03:30,270 --> 00:03:32,710
And so, if you compare this code example,
68
68
00:03:32,710 --> 00:03:34,360
with the one on the left,
69
69
00:03:34,360 --> 00:03:37,230
then you will really see that in this example,
70
70
00:03:37,230 --> 00:03:40,030
all we are doing is describing the way
71
71
00:03:40,030 --> 00:03:42,620
that the computer should achieve the result
72
72
00:03:42,620 --> 00:03:44,210
that we are looking for.
73
73
00:03:44,210 --> 00:03:47,780
We are simply telling it what to do, which in this case,
74
74
00:03:47,780 --> 00:03:51,680
is to simply map the original array onto a new array
75
75
00:03:51,680 --> 00:03:54,120
and doubling all the elements.
76
76
00:03:54,120 --> 00:03:56,470
But, all these super detailed steps
77
77
00:03:56,470 --> 00:04:00,440
that we have on the left side, like creating an empty array
78
78
00:04:00,440 --> 00:04:02,520
and initializing a counter,
79
79
00:04:02,520 --> 00:04:05,730
all of these steps have been abstracted away,
80
80
00:04:05,730 --> 00:04:09,550
because we don't really care about them, all right?
81
81
00:04:09,550 --> 00:04:12,140
And this is pretty important to understand,
82
82
00:04:12,140 --> 00:04:15,980
because more and more this is how modern JavaScript code
83
83
00:04:15,980 --> 00:04:17,890
is actually written.
84
84
00:04:17,890 --> 00:04:21,700
So, the difference between imperative and declarative
85
85
00:04:21,700 --> 00:04:24,530
is not just some theoretical difference.
86
86
00:04:24,530 --> 00:04:28,490
So, the declarative paradigm is actually a really big
87
87
00:04:28,490 --> 00:04:31,040
and popular programming paradigm,
88
88
00:04:31,040 --> 00:04:35,020
which has even given rise to a sub paradigm called,
89
89
00:04:35,020 --> 00:04:36,383
functional programming.
90
90
00:04:37,620 --> 00:04:39,320
And functional programming,
91
91
00:04:39,320 --> 00:04:42,120
is basically a declarative paradigm,
92
92
00:04:42,120 --> 00:04:45,780
which is based on the idea of writing software,
93
93
00:04:45,780 --> 00:04:50,200
simply by combining multiple so called pure functions,
94
94
00:04:50,200 --> 00:04:54,230
while avoiding side effects and mutating data.
95
95
00:04:54,230 --> 00:04:56,810
And actually, functional programming
96
96
00:04:56,810 --> 00:04:58,970
and writing declarative code,
97
97
00:04:58,970 --> 00:05:03,280
has now basically become the modern way of writing code
98
98
00:05:03,280 --> 00:05:05,440
in the JavaScript world.
99
99
00:05:05,440 --> 00:05:09,831
So, you will see declarative and functional code everywhere.
100
100
00:05:09,831 --> 00:05:14,070
And, in fact, we have even been using it all along,
101
101
00:05:14,070 --> 00:05:16,730
but without really knowing that this style
102
102
00:05:16,730 --> 00:05:21,050
was called declarative, and functional, all right.
103
103
00:05:21,050 --> 00:05:23,730
But let's quickly go back to the definition
104
104
00:05:23,730 --> 00:05:27,800
of functional programming, and talk about what side effects
105
105
00:05:27,800 --> 00:05:30,130
and pure functions are.
106
106
00:05:30,130 --> 00:05:35,130
So, a side effect is basically simply a modification
107
107
00:05:35,130 --> 00:05:39,350
of any data that's outside of a function.
108
108
00:05:39,350 --> 00:05:43,680
So, for example, mutating any variable that is external
109
109
00:05:43,680 --> 00:05:47,370
to the function is causing a side effect.
110
110
00:05:47,370 --> 00:05:51,070
So basically, any variable that is outside of the scope
111
111
00:05:51,070 --> 00:05:54,100
of the function, all right?
112
112
00:05:54,100 --> 00:05:57,526
Now, data does not only refer to variables,
113
113
00:05:57,526 --> 00:06:01,840
so for example, logging stuff to the console,
114
114
00:06:01,840 --> 00:06:04,280
or also changing something in the DOM,
115
115
00:06:04,280 --> 00:06:07,370
is also causing side effects.
116
116
00:06:07,370 --> 00:06:09,660
Now next up, a pure function,
117
117
00:06:09,660 --> 00:06:12,800
is a function without side effects.
118
118
00:06:12,800 --> 00:06:16,070
So, basically a function that does not mutate
119
119
00:06:16,070 --> 00:06:20,210
any external variables, and that does also not depend
120
120
00:06:20,210 --> 00:06:22,350
on any external variables.
121
121
00:06:22,350 --> 00:06:26,700
So basically, if we give the same inputs to a pure function,
122
122
00:06:26,700 --> 00:06:29,890
it will always return the same output
123
123
00:06:29,890 --> 00:06:32,870
and again, that's because it does not depend
124
124
00:06:32,870 --> 00:06:34,880
on any external variables,
125
125
00:06:34,880 --> 00:06:36,963
and it also does not manipulate them.
126
126
00:06:37,840 --> 00:06:41,760
And finally, if we look again, at our definition here,
127
127
00:06:41,760 --> 00:06:44,260
we also see that functional programming
128
128
00:06:44,260 --> 00:06:47,490
is about avoiding mutating data,
129
129
00:06:47,490 --> 00:06:51,810
and we do that by using something called immutability.
130
130
00:06:51,810 --> 00:06:54,920
So, in functional programming state,
131
131
00:06:54,920 --> 00:06:59,890
which also means basically data is never modified.
132
132
00:06:59,890 --> 00:07:02,410
So, let's say that we have some application,
133
133
00:07:02,410 --> 00:07:06,250
and we have an object there to keep track of all the data
134
134
00:07:06,250 --> 00:07:08,580
that we need in an application.
135
135
00:07:08,580 --> 00:07:11,130
And so that we usually called state,
136
136
00:07:11,130 --> 00:07:14,220
and so again, in functional programming,
137
137
00:07:14,220 --> 00:07:17,040
that state is never modified.
138
138
00:07:17,040 --> 00:07:21,550
Instead, what we will do is to copy that object,
139
139
00:07:21,550 --> 00:07:26,160
so that state, and then it is that copy that is mutated,
140
140
00:07:26,160 --> 00:07:28,210
and can then be returned,
141
141
00:07:28,210 --> 00:07:32,840
but the original state is never touched, okay?
142
142
00:07:32,840 --> 00:07:37,020
So, that's what it means for the state being immutable,
143
143
00:07:37,020 --> 00:07:40,100
and the big upside of immutability is that,
144
144
00:07:40,100 --> 00:07:43,200
it makes it so much easier to keep track
145
145
00:07:43,200 --> 00:07:46,971
of how the data flows through our entire application.
146
146
00:07:46,971 --> 00:07:51,370
And so ultimately, that will allow us to write better code
147
147
00:07:51,370 --> 00:07:56,070
with less bugs, and code that is also more readable,
148
148
00:07:56,070 --> 00:07:58,890
which overall, is the entire goal
149
149
00:07:58,890 --> 00:08:02,510
of using functional programming in the first place.
150
150
00:08:02,510 --> 00:08:04,420
Now, I'm telling you all this,
151
151
00:08:04,420 --> 00:08:06,240
not with the goal of turning you
152
152
00:08:06,240 --> 00:08:08,400
into a functional programmer,
153
153
00:08:08,400 --> 00:08:12,160
because that would actually be a very hard task,
154
154
00:08:12,160 --> 00:08:16,320
because this is really just a very high level introduction
155
155
00:08:16,320 --> 00:08:19,100
to what functional programming actually is.
156
156
00:08:19,100 --> 00:08:20,520
But behind the surface,
157
157
00:08:20,520 --> 00:08:23,400
functional programming is a huge paradigm,
158
158
00:08:23,400 --> 00:08:27,490
which is really difficult to implement in practice.
159
159
00:08:27,490 --> 00:08:30,360
But it is still very important that you know,
160
160
00:08:30,360 --> 00:08:33,700
some of these principles, such as side effects,
161
161
00:08:33,700 --> 00:08:36,370
pure functions, and immutability,
162
162
00:08:36,370 --> 00:08:38,610
because many of the popular libraries,
163
163
00:08:38,610 --> 00:08:42,000
such as React or Redux, are actually built
164
164
00:08:42,000 --> 00:08:44,510
around all of these principles.
165
165
00:08:44,510 --> 00:08:46,080
So for example, in React,
166
166
00:08:46,080 --> 00:08:49,190
the state is also completely immutable,
167
167
00:08:49,190 --> 00:08:52,370
and so if you ever want to learn something like React,
168
168
00:08:52,370 --> 00:08:54,830
you will need to know about these concepts
169
169
00:08:54,830 --> 00:08:57,460
in order to use it properly.
170
170
00:08:57,460 --> 00:09:01,150
However, some principles such as pure functions,
171
171
00:09:01,150 --> 00:09:05,570
or side effects, can actually be a bit easier to implement
172
172
00:09:05,570 --> 00:09:07,460
into our own code.
173
173
00:09:07,460 --> 00:09:09,890
So, what I'm trying to say is that,
174
174
00:09:09,890 --> 00:09:14,330
we can actually mix imperative and declarative programming
175
175
00:09:14,330 --> 00:09:19,330
in our own codes, we don't have to go 100% declarative.
176
176
00:09:19,570 --> 00:09:24,090
Or in other words, we don't have to go 100% in the direction
177
177
00:09:24,090 --> 00:09:27,260
of making our code completely functional.
178
178
00:09:27,260 --> 00:09:30,620
And so again, we can already start using,
179
179
00:09:30,620 --> 00:09:32,840
some of the functional programming techniques
180
180
00:09:32,840 --> 00:09:35,050
in our own code base.
181
181
00:09:35,050 --> 00:09:38,820
So for example, you can try to avoid data mutations
182
182
00:09:38,820 --> 00:09:40,840
as often as possible.
183
183
00:09:40,840 --> 00:09:43,900
And of course, this will not always be possible,
184
184
00:09:43,900 --> 00:09:46,930
but it's also not really necessary.
185
185
00:09:46,930 --> 00:09:50,150
So these are mainly and are just suggestions,
186
186
00:09:50,150 --> 00:09:53,540
but which will still create more readable
187
187
00:09:53,540 --> 00:09:57,120
and overall better and cleaner code.
188
188
00:09:57,120 --> 00:10:00,570
So, another thing that you can do is to always prefer,
189
189
00:10:00,570 --> 00:10:04,260
built in methods or functions that do not produce
190
190
00:10:04,260 --> 00:10:07,510
side effects over the ones that do,
191
191
00:10:07,510 --> 00:10:11,450
and this is really important for data transformations.
192
192
00:10:11,450 --> 00:10:13,210
So whenever you want to do that,
193
193
00:10:13,210 --> 00:10:18,210
you should use a method such as Map, Filter and Reduce.
194
194
00:10:18,230 --> 00:10:20,970
So, this is the functional and modern way
195
195
00:10:20,970 --> 00:10:24,380
of doing data transformations, and many times,
196
196
00:10:24,380 --> 00:10:27,620
this is actually the first contact that many people have,
197
197
00:10:27,620 --> 00:10:29,570
with functional programming.
198
198
00:10:29,570 --> 00:10:32,860
So, Map, Filter and Reduce are actually present
199
199
00:10:32,860 --> 00:10:35,550
in all functional programming languages,
200
200
00:10:35,550 --> 00:10:39,460
and they are very important to implement a functional code
201
201
00:10:39,460 --> 00:10:42,173
into more declarative code in our code.
202
202
00:10:43,100 --> 00:10:46,730
And finally, you can also try to avoid side effects
203
203
00:10:46,730 --> 00:10:49,610
into functions that you write yourself.
204
204
00:10:49,610 --> 00:10:53,320
And again, this is of course, not always possible,
205
205
00:10:53,320 --> 00:10:55,970
and also not always necessary.
206
206
00:10:55,970 --> 00:10:59,390
So, we will never be able to avoid all side effects
207
207
00:10:59,390 --> 00:11:03,040
in applications, because of course, at some point,
208
208
00:11:03,040 --> 00:11:05,590
the application needs to do something.
209
209
00:11:05,590 --> 00:11:08,120
So, it needs to display something on the DOM,
210
210
00:11:08,120 --> 00:11:10,380
or log something to the console,
211
211
00:11:10,380 --> 00:11:14,470
or really create some side effect, okay?
212
212
00:11:14,470 --> 00:11:17,060
But you can still try to think about this,
213
213
00:11:17,060 --> 00:11:19,940
and to start incorporating side effects
214
214
00:11:19,940 --> 00:11:21,343
more into your own code.
215
215
00:11:22,310 --> 00:11:26,420
And now to finish, let's come back to declarative syntax,
216
216
00:11:26,420 --> 00:11:30,390
because functional programming is only a part of using
217
217
00:11:30,390 --> 00:11:32,750
and writing declarative code.
218
218
00:11:32,750 --> 00:11:36,160
So, in order to write code that is more declarative,
219
219
00:11:36,160 --> 00:11:39,320
you should use array and object destructuring
220
220
00:11:39,320 --> 00:11:41,310
whenever that's possible.
221
221
00:11:41,310 --> 00:11:43,740
You should also use the spread operator,
222
222
00:11:43,740 --> 00:11:47,570
the ternary operator, and also template literals
223
223
00:11:47,570 --> 00:11:51,300
whenever that is possible, because if you think about it,
224
224
00:11:51,300 --> 00:11:54,700
then all of these four ways of writing code,
225
225
00:11:54,700 --> 00:11:57,930
actually makes the code more declarative.
226
226
00:11:57,930 --> 00:12:01,330
So, these operators are more about telling the code
227
227
00:12:01,330 --> 00:12:04,270
what to do, and not exactly the steps
228
228
00:12:04,270 --> 00:12:06,530
that it should take, right?
229
229
00:12:06,530 --> 00:12:11,530
And that's, again, true for all these four pieces of syntax.
230
230
00:12:11,880 --> 00:12:15,410
All right, so let's now actually continue working
231
231
00:12:15,410 --> 00:12:19,060
on the code example from last lecture and implement,
232
232
00:12:19,060 --> 00:12:23,183
some of these functional programming principles in practice.
20941
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.