Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
WEBVTT
1
00:00:01.480 --> 00:00:02.780
So in this section,
2
00:00:02.780 --> 00:00:06.710
we have been talking about modern JavaScript development.
3
00:00:06.710 --> 00:00:09.760
So things like tooling and modules.
4
00:00:09.760 --> 00:00:11.670
But now let's finish the section
5
00:00:11.670 --> 00:00:16.120
by also talking about modern JavaScript programming itself.
6
00:00:16.120 --> 00:00:19.760
So basically, about how to write modern
7
00:00:19.760 --> 00:00:21.563
and clean JavaScript code.
8
00:00:23.070 --> 00:00:26.260
And this lecture is actually mostly gonna be
9
00:00:26.260 --> 00:00:28.030
a review lecture.
10
00:00:28.030 --> 00:00:31.980
So, a lecture where I'm gonna bring together all the clean
11
00:00:31.980 --> 00:00:35.430
and modern JavaScript techniques and practices
12
00:00:35.430 --> 00:00:38.420
that I've been showing you throughout the course.
13
00:00:38.420 --> 00:00:41.650
And so with this, he will then have all this information
14
00:00:41.650 --> 00:00:42.753
in one place.
15
00:00:43.590 --> 00:00:45.440
Then in the next lecture,
16
00:00:45.440 --> 00:00:48.790
we will actually bring some of these topics to practice
17
00:00:48.790 --> 00:00:51.670
by fixing a bad coding example
18
00:00:51.670 --> 00:00:54.740
that does not follow these practices.
19
00:00:54.740 --> 00:00:57.283
But anyway, let's now get started.
20
00:00:58.360 --> 00:01:01.900
So one of the most important things when your code
21
00:01:01.900 --> 00:01:04.890
is that you should write readable code,
22
00:01:04.890 --> 00:01:08.060
which basically means that you should write code
23
00:01:08.060 --> 00:01:10.150
so that others can understand it,
24
00:01:10.150 --> 00:01:13.540
and also so that you can understand it yourself
25
00:01:13.540 --> 00:01:15.280
in the future.
26
00:01:15.280 --> 00:01:18.920
Also, you should try to avoid writing too clever
27
00:01:18.920 --> 00:01:21.730
and maybe over complicated solutions
28
00:01:21.730 --> 00:01:25.200
that might make you feel really smart as a developer,
29
00:01:25.200 --> 00:01:27.570
but which also might make your code
30
00:01:27.570 --> 00:01:30.230
very confusing and unreadable.
31
00:01:30.230 --> 00:01:33.550
And so in many situations it's best to simply write
32
00:01:33.550 --> 00:01:36.183
the most straightforward solutions.
33
00:01:37.040 --> 00:01:40.350
Another thing that's very important for readable code,
34
00:01:40.350 --> 00:01:44.790
is to give functions and variables very descriptive names.
35
00:01:44.790 --> 00:01:47.320
So for variables, you should name them
36
00:01:47.320 --> 00:01:49.350
according to what they contain.
37
00:01:49.350 --> 00:01:51.380
and for functions, you should name them
38
00:01:51.380 --> 00:01:53.570
according to what they do.
39
00:01:53.570 --> 00:01:56.520
And so by doing this, you will make it really clear
40
00:01:56.520 --> 00:02:00.170
and obvious to everyone what each variable is
41
00:02:00.170 --> 00:02:01.743
and what each function does.
42
00:02:02.710 --> 00:02:05.210
Next, there are some more general rules
43
00:02:05.210 --> 00:02:06.140
that you should follow
44
00:02:06.140 --> 00:02:09.040
in order to write modern and clean code,
45
00:02:09.040 --> 00:02:12.220
which are to use the DRY principle.
46
00:02:12.220 --> 00:02:14.190
So don't repeat yourself,
47
00:02:14.190 --> 00:02:18.010
which means that you should essentially refactor your code
48
00:02:18.010 --> 00:02:19.650
whenever you can.
49
00:02:19.650 --> 00:02:23.160
Also, you should not pollute the global namespace
50
00:02:23.160 --> 00:02:27.220
and instead encapsulate your data into functions
51
00:02:27.220 --> 00:02:29.890
or classes or modules.
52
00:02:29.890 --> 00:02:34.890
Also, you shouldn't use Var for declaring variables, right?
53
00:02:35.470 --> 00:02:39.070
So I've mentioned this one, many times in the course.
54
00:02:39.070 --> 00:02:40.620
And so by now you already know
55
00:02:40.620 --> 00:02:42.670
that you should always use Const,
56
00:02:42.670 --> 00:02:46.490
and only if you want to change any variable, then use Let,
57
00:02:46.490 --> 00:02:48.359
but never Var.
58
00:02:48.359 --> 00:02:53.260
And finally you should always use strong type checks.
59
00:02:53.260 --> 00:02:55.370
So always use the triple equals
60
00:02:55.370 --> 00:02:57.580
over the simple double equals,
61
00:02:57.580 --> 00:03:00.490
which do not perform type checks.
62
00:03:00.490 --> 00:03:02.370
Now about writing functions,
63
00:03:02.370 --> 00:03:04.660
which is one of the most important things
64
00:03:04.660 --> 00:03:07.250
that we do as JavaScript developers,
65
00:03:07.250 --> 00:03:10.530
a domain rule that we should follow by writing functions
66
00:03:10.530 --> 00:03:12.060
is that each function
67
00:03:12.060 --> 00:03:16.410
should usually only do one thing, all right?
68
00:03:16.410 --> 00:03:20.250
Now, many times of course, we will want to break that rule,
69
00:03:20.250 --> 00:03:23.580
but in general, it's good to keep this rule in mind.
70
00:03:23.580 --> 00:03:26.810
So that you always write like small functions,
71
00:03:26.810 --> 00:03:31.500
which only do one thing, but do it really well, all right?
72
00:03:31.500 --> 00:03:34.710
Next, you shouldn't use more than three parameters
73
00:03:34.710 --> 00:03:36.230
in a function.
74
00:03:36.230 --> 00:03:39.810
And this actually goes in line with the previous guideline
75
00:03:39.810 --> 00:03:43.720
because of course, if a function only does one thing,
76
00:03:43.720 --> 00:03:47.100
then probably it doesn't need so many parameters
77
00:03:47.100 --> 00:03:48.900
in the first place.
78
00:03:48.900 --> 00:03:51.870
Also use default parameters in your functions
79
00:03:51.870 --> 00:03:53.860
whenever that's possible,
80
00:03:53.860 --> 00:03:58.680
and in general return the same data type as you received.
81
00:03:58.680 --> 00:04:02.070
So for example, if you receive two or three numbers
82
00:04:02.070 --> 00:04:04.010
as an input to a function,
83
00:04:04.010 --> 00:04:07.600
then probably you will want to return a number as well.
84
00:04:07.600 --> 00:04:10.910
So that then makes more sense for when you consume,
85
00:04:10.910 --> 00:04:13.710
so for when you use the function later.
86
00:04:13.710 --> 00:04:16.880
And again, this is a rule that you can of course break,
87
00:04:16.880 --> 00:04:20.710
but it's again, good to keep this one in mind.
88
00:04:20.710 --> 00:04:24.200
Finally, you can and should use arrow functions
89
00:04:24.200 --> 00:04:28.110
whenever they make the code more readable, okay?
90
00:04:28.110 --> 00:04:31.520
And here, many people actually have different opinions.
91
00:04:31.520 --> 00:04:35.020
So some people started to use arrow functions everywhere,
92
00:04:35.020 --> 00:04:37.240
and some people don't like them at all
93
00:04:37.240 --> 00:04:41.000
because they think that they completely make code unreadable
94
00:04:41.000 --> 00:04:43.040
no matter when they're used.
95
00:04:43.040 --> 00:04:47.220
But personally, I like to kind of follow a middle ground.
96
00:04:47.220 --> 00:04:50.210
So I still use the more regular functions
97
00:04:50.210 --> 00:04:51.860
in many situations,
98
00:04:51.860 --> 00:04:55.060
but if arrow functions make the code more readable,
99
00:04:55.060 --> 00:04:57.900
then I will totally use arrow functions.
100
00:04:57.900 --> 00:05:00.260
And one great use case in my opinion,
101
00:05:00.260 --> 00:05:03.563
is in the callback functions of array methods.
102
00:05:04.400 --> 00:05:05.907
And now after functions,
103
00:05:05.907 --> 00:05:09.460
our next topic is Object Oriented Programming.
104
00:05:09.460 --> 00:05:13.710
And in my opinion, in order to implement OOP in JavaScript,
105
00:05:13.710 --> 00:05:16.690
you should now use ES6 classes.
106
00:05:16.690 --> 00:05:21.407
And so that's also what I did after OOP section, right?
107
00:05:22.790 --> 00:05:25.060
Now, when designing your classes,
108
00:05:25.060 --> 00:05:27.670
make sure that you encapsulate any data
109
00:05:27.670 --> 00:05:30.320
that shouldn't be accessible from the outside
110
00:05:30.320 --> 00:05:32.870
so that you don't mutate that data
111
00:05:32.870 --> 00:05:36.060
from outside the class, all right?
112
00:05:36.060 --> 00:05:39.620
Now, probably you will still need to at least manipulate
113
00:05:39.620 --> 00:05:41.850
some data that's in the class,
114
00:05:41.850 --> 00:05:45.510
but for that, you should then implement a public API.
115
00:05:45.510 --> 00:05:47.450
So basically a couple of methods
116
00:05:47.450 --> 00:05:49.690
that can then manipulate that data
117
00:05:49.690 --> 00:05:52.523
exactly as you want that to happen.
118
00:05:53.410 --> 00:05:56.950
And again, we talked about all of this already before.
119
00:05:56.950 --> 00:06:00.760
So this is really just a review of all these big topics
120
00:06:00.760 --> 00:06:04.423
that we have been handling throughout all of this course.
121
00:06:05.400 --> 00:06:09.070
Now, as you implement your methods in your classes,
122
00:06:09.070 --> 00:06:12.790
make sure that you implement chaining in all the methods
123
00:06:12.790 --> 00:06:14.640
where it actually makes sense
124
00:06:14.640 --> 00:06:18.490
because this can make your methods way easier to use,
125
00:06:18.490 --> 00:06:19.910
not only for you,
126
00:06:19.910 --> 00:06:23.260
but maybe also for other developers on your team.
127
00:06:23.260 --> 00:06:26.060
So this is yet another great practice
128
00:06:26.060 --> 00:06:28.850
when you are writing your classes.
129
00:06:28.850 --> 00:06:32.250
Finally, one important thing to also mention here
130
00:06:32.250 --> 00:06:35.510
is that in regular objects, when you're writing methods,
131
00:06:35.510 --> 00:06:38.600
then please don't use the arrow functions there,
132
00:06:38.600 --> 00:06:41.210
because by doing that, you will not get access
133
00:06:41.210 --> 00:06:44.190
to the disc keywords of that object.
134
00:06:44.190 --> 00:06:47.810
Remember, and so always avoid arrow functions,
135
00:06:47.810 --> 00:06:51.920
even if you're not even using the disc keyword in a method,
136
00:06:51.920 --> 00:06:54.220
because simply by getting into the habit
137
00:06:54.220 --> 00:06:58.520
of avoiding arrow functions as methods in this situation,
138
00:06:58.520 --> 00:07:03.520
you will then not commit any mistakes ever, all right?
139
00:07:03.690 --> 00:07:08.690
Okay, next up, let's talk about avoiding nested code.
140
00:07:08.920 --> 00:07:10.920
So writing nested code,
141
00:07:10.920 --> 00:07:14.600
which basically means writing code inside of blocks,
142
00:07:14.600 --> 00:07:18.290
inside of other blocks is really, really bad
143
00:07:18.290 --> 00:07:20.020
for readable code.
144
00:07:20.020 --> 00:07:24.240
And so we should avoid nested code at all costs.
145
00:07:24.240 --> 00:07:27.300
And one great way of avoiding nested code
146
00:07:27.300 --> 00:07:30.380
is to use guard clauses as we have been doing
147
00:07:30.380 --> 00:07:33.650
over the last couple of sections, right?
148
00:07:33.650 --> 00:07:36.450
So guard clauses basically simply means
149
00:07:36.450 --> 00:07:41.450
to use an early return in case some condition is not met.
150
00:07:42.220 --> 00:07:45.280
Also, you can use the ternary operator
151
00:07:45.280 --> 00:07:49.410
or even logical operators instead of an if statement,
152
00:07:49.410 --> 00:07:51.170
because the ternary operator,
153
00:07:51.170 --> 00:07:54.090
of course, does not create a new code block
154
00:07:54.090 --> 00:07:56.780
while the if statement does.
155
00:07:56.780 --> 00:07:59.780
Now, if you really do need an if statement,
156
00:07:59.780 --> 00:08:02.770
then instead of an if else statement,
157
00:08:02.770 --> 00:08:05.660
you should use multiple ifs instead.
158
00:08:05.660 --> 00:08:09.430
Because again, this will make code a lot more readable
159
00:08:09.430 --> 00:08:13.070
than having to go through all these if, and else if,
160
00:08:13.070 --> 00:08:15.070
and else blocks.
161
00:08:15.070 --> 00:08:17.523
So that's also another modern practice
162
00:08:17.523 --> 00:08:19.580
that we start to see more and more
163
00:08:19.580 --> 00:08:22.103
in modern JavaScript code basis.
164
00:08:23.170 --> 00:08:27.600
Next, you should complete the avoid any kind of loops.
165
00:08:27.600 --> 00:08:30.090
And with that, I mean any for loops.
166
00:08:30.090 --> 00:08:34.450
So the for and also the for off loops should be avoided
167
00:08:34.450 --> 00:08:37.010
if you want to avoid nested code.
168
00:08:37.010 --> 00:08:39.760
And so instead you can use array methods
169
00:08:39.760 --> 00:08:43.210
like a map, filter and reduce.
170
00:08:43.210 --> 00:08:45.030
And finally you should avoid
171
00:08:45.030 --> 00:08:49.300
callback based asynchronous APIs whenever you can.
172
00:08:49.300 --> 00:08:52.560
And so that actually brings us to our next topic,
173
00:08:52.560 --> 00:08:55.110
which is asynchronous code.
174
00:08:55.110 --> 00:08:59.120
So for best readability, always consume promises
175
00:08:59.120 --> 00:09:00.930
using async await
176
00:09:00.930 --> 00:09:04.340
and not using the den and the catch methods,
177
00:09:04.340 --> 00:09:08.290
because these methods actually require callback functions,
178
00:09:08.290 --> 00:09:11.640
which will then introduce even more nested code.
179
00:09:11.640 --> 00:09:13.150
And so that's again,
180
00:09:13.150 --> 00:09:16.920
something that we really want to avoid, all right?
181
00:09:16.920 --> 00:09:19.690
So these two go kind of together.
182
00:09:19.690 --> 00:09:23.080
So avoiding callback-based, asynchronous APIs,
183
00:09:23.080 --> 00:09:26.020
and instead opting for using promises
184
00:09:26.020 --> 00:09:30.030
and then consume these promises with async await.
185
00:09:30.030 --> 00:09:32.520
Now, something that's very important
186
00:09:32.520 --> 00:09:34.490
is that whenever you can,
187
00:09:34.490 --> 00:09:37.090
you should run promises in parallel
188
00:09:37.090 --> 00:09:40.660
using the promise.all combinator function.
189
00:09:40.660 --> 00:09:44.950
So when you have two promises that can run at the same time,
190
00:09:44.950 --> 00:09:48.360
so promises that do not depend on each other,
191
00:09:48.360 --> 00:09:50.520
then please run them in parallel
192
00:09:50.520 --> 00:09:54.870
to make the application a little bit faster for your users.
193
00:09:54.870 --> 00:09:59.540
And finally, always handle errors and promise rejections.
194
00:09:59.540 --> 00:10:01.520
So this is simply a best practice
195
00:10:01.520 --> 00:10:04.330
for clean code, all right.
196
00:10:04.330 --> 00:10:08.580
So these are the main best practices for writing modern
197
00:10:08.580 --> 00:10:12.200
and clean JavaScript code that I can think of.
198
00:10:12.200 --> 00:10:14.440
But now let's turn our attention
199
00:10:14.440 --> 00:10:18.280
to a completely different way of writing code.
200
00:10:18.280 --> 00:10:21.390
And so we're gonna take a small detour here
201
00:10:21.390 --> 00:10:24.370
and talk about declarative code.
202
00:10:24.370 --> 00:10:27.540
So there are two fundamentally different ways
203
00:10:27.540 --> 00:10:29.920
of writing code in programming,
204
00:10:29.920 --> 00:10:32.360
which we also call paradigms.
205
00:10:32.360 --> 00:10:33.940
And these two paradigms
206
00:10:33.940 --> 00:10:37.163
are imperative code and declarative code.
207
00:10:38.070 --> 00:10:41.040
Now, whenever we write imperative code,
208
00:10:41.040 --> 00:10:43.400
we basically need to explain the computer
209
00:10:43.400 --> 00:10:46.172
how to do a certain things.
210
00:10:46.172 --> 00:10:50.410
So basically we need to explain every single step
211
00:10:50.410 --> 00:10:52.670
that the computer needs to follow
212
00:10:52.670 --> 00:10:55.600
in order to achieve a certain result.
213
00:10:55.600 --> 00:10:58.610
But this might sound a little bit abstract.
214
00:10:58.610 --> 00:11:01.580
So let's try a more real world example.
215
00:11:01.580 --> 00:11:06.300
So let's say that we want someone to bake a cake for us.
216
00:11:06.300 --> 00:11:09.710
And so if we would do that in an imperative way,
217
00:11:09.710 --> 00:11:13.980
we will tell the person exactly the step by step recipe
218
00:11:13.980 --> 00:11:15.740
that they would have to follow
219
00:11:15.740 --> 00:11:19.470
in order to bake that cake, all right?
220
00:11:19.470 --> 00:11:22.530
So again, it is telling every single step
221
00:11:22.530 --> 00:11:26.980
that the person has to follow in order to achieve a result.
222
00:11:26.980 --> 00:11:29.760
And now bringing that back into code,
223
00:11:29.760 --> 00:11:31.580
here in this code example,
224
00:11:31.580 --> 00:11:34.840
we are trying to double the R array.
225
00:11:34.840 --> 00:11:39.450
And so this loop that I have here is a purely imperative way
226
00:11:39.450 --> 00:11:41.440
of writing that.
227
00:11:41.440 --> 00:11:44.330
So here we are telling the computer step-by-step
228
00:11:44.330 --> 00:11:46.570
to create an empty array,
229
00:11:46.570 --> 00:11:50.370
to create a counter that starts at zero,
230
00:11:50.370 --> 00:11:52.050
then to increase that counter
231
00:11:52.050 --> 00:11:55.610
until we reach the length of the original array
232
00:11:55.610 --> 00:11:59.680
and then how exactly to store the new result
233
00:11:59.680 --> 00:12:02.070
in each new position of the array.
234
00:12:02.070 --> 00:12:03.690
So there's a lot of steps
235
00:12:03.690 --> 00:12:06.020
that we really give the computer here
236
00:12:06.020 --> 00:12:08.620
in order for us to achieve the result
237
00:12:08.620 --> 00:12:10.833
of doubling that R array.
238
00:12:11.780 --> 00:12:14.930
Okay, so that's imperative programming,
239
00:12:14.930 --> 00:12:18.520
but on the other hand, we also have declarative programming
240
00:12:18.520 --> 00:12:23.040
where the programmer tells the computer only what to do.
241
00:12:23.040 --> 00:12:25.950
And so when we write declarative code,
242
00:12:25.950 --> 00:12:28.970
we simply describe the way that a computer
243
00:12:28.970 --> 00:12:31.400
should achieve a certain result,
244
00:12:31.400 --> 00:12:33.420
but the how it should do it.
245
00:12:33.420 --> 00:12:36.310
So basically the step by step instructions,
246
00:12:36.310 --> 00:12:38.580
they get abstracted away.
247
00:12:38.580 --> 00:12:40.860
So we do not care about them.
248
00:12:40.860 --> 00:12:43.647
And going back to our cake example here,
249
00:12:43.647 --> 00:12:47.900
the declarative way of instructing someone to bake the cake
250
00:12:47.900 --> 00:12:52.070
would be to simply describe that cake to the person,
251
00:12:52.070 --> 00:12:54.220
and then the person would have to come up
252
00:12:54.220 --> 00:12:57.750
with the step by step recipe on their own.
253
00:12:57.750 --> 00:13:01.030
So simply describing the task and the results
254
00:13:01.030 --> 00:13:04.380
that should be achieved is the declarative way
255
00:13:04.380 --> 00:13:06.850
of doing it, all right?
256
00:13:06.850 --> 00:13:09.150
And now coming back to the code example
257
00:13:09.150 --> 00:13:11.900
of duplicating the values in an array,
258
00:13:11.900 --> 00:13:15.340
this is how we do it in the declarative way.
259
00:13:15.340 --> 00:13:18.990
So we have R array and then we simply tell JavaScript
260
00:13:18.990 --> 00:13:22.460
that it should map the values in the R array
261
00:13:22.460 --> 00:13:23.960
to a new array.
262
00:13:23.960 --> 00:13:28.120
And each of these values should be multiplied by two.
263
00:13:28.120 --> 00:13:30.530
And so if you compare this code example
264
00:13:30.530 --> 00:13:32.200
with the one on the left,
265
00:13:32.200 --> 00:13:35.060
then you will really see that in this example,
266
00:13:35.060 --> 00:13:37.860
all we are doing is to describe in the way
267
00:13:37.860 --> 00:13:40.450
that the computer should achieve the result
268
00:13:40.450 --> 00:13:42.060
that we are looking for.
269
00:13:42.060 --> 00:13:44.550
We are simply telling it what to do,
270
00:13:44.550 --> 00:13:48.110
which in this case is to simply map the original array
271
00:13:48.110 --> 00:13:51.950
onto a new array and doubling all the elements.
272
00:13:51.950 --> 00:13:54.300
But all these super detailed steps
273
00:13:54.300 --> 00:13:56.260
that we have on the left side,
274
00:13:56.260 --> 00:14:00.350
like creating an empty array and initializing a counter,
275
00:14:00.350 --> 00:14:03.570
all of these steps have been abstracted away
276
00:14:03.570 --> 00:14:07.380
because we don't really care about them, all right?
277
00:14:07.380 --> 00:14:09.970
And this is pretty important to understand
278
00:14:09.970 --> 00:14:11.620
because more and more,
279
00:14:11.620 --> 00:14:15.720
this is how modern JavaScript code is actually written.
280
00:14:15.720 --> 00:14:19.530
So the difference between imperative and declarative
281
00:14:19.530 --> 00:14:22.370
is not just some theoretical difference.
282
00:14:22.370 --> 00:14:26.320
So the declarative paradigm is actually a really big
283
00:14:26.320 --> 00:14:28.870
and popular programming paradigm,
284
00:14:28.870 --> 00:14:30.730
which has even given rise
285
00:14:30.730 --> 00:14:34.223
to a sub paradigm called functional programming.
286
00:14:35.820 --> 00:14:38.430
And functional programming is basically
287
00:14:38.430 --> 00:14:40.320
a declarative paradigm,
288
00:14:40.320 --> 00:14:43.990
which is based on the idea of writing software
289
00:14:43.990 --> 00:14:48.390
simply by combining multiple so-called pure functions
290
00:14:48.390 --> 00:14:52.440
while avoiding side effects and mutating data.
291
00:14:52.440 --> 00:14:55.010
And actually functional programming
292
00:14:55.010 --> 00:14:57.170
and to writing declarative code
293
00:14:57.170 --> 00:15:01.430
has now basically become the modern way of writing code
294
00:15:01.430 --> 00:15:03.650
in the JavaScript world.
295
00:15:03.650 --> 00:15:08.360
So you will see declarative and functional code everywhere.
296
00:15:08.360 --> 00:15:12.280
And in fact, we have even been using it all along,
297
00:15:12.280 --> 00:15:14.910
but without really knowing that the style
298
00:15:14.910 --> 00:15:19.260
was called declarative and functional, all right.
299
00:15:19.260 --> 00:15:20.820
But let's quickly go back
300
00:15:20.820 --> 00:15:23.720
to the definition of functional programming
301
00:15:23.720 --> 00:15:28.330
and talk about what side effects and pure functions are.
302
00:15:28.330 --> 00:15:33.330
So a side effect is basically simply a modification
303
00:15:33.330 --> 00:15:37.540
of any data that's outside of a function.
304
00:15:37.540 --> 00:15:41.890
So for example, mutating any variable data is external
305
00:15:41.890 --> 00:15:45.570
to the function is causing a side effect.
306
00:15:45.570 --> 00:15:49.260
So basically any variable that is outside of the scope
307
00:15:49.260 --> 00:15:51.912
of the function, all right?
308
00:15:51.912 --> 00:15:56.070
Now data does not only refer to variables.
309
00:15:56.070 --> 00:16:00.040
So for example, logging stuff to the console,
310
00:16:00.040 --> 00:16:02.470
or also changing something in the DOM
311
00:16:02.470 --> 00:16:05.630
is also causing side effects.
312
00:16:05.630 --> 00:16:08.570
But don't worry too much about this for now
313
00:16:08.570 --> 00:16:11.710
because we will talk a lot more about all this
314
00:16:11.710 --> 00:16:14.630
in a whole section on functional programming
315
00:16:14.630 --> 00:16:17.400
that is at the end of this course.
316
00:16:17.400 --> 00:16:19.730
Now, by the time I'm launching this course,
317
00:16:19.730 --> 00:16:22.640
that section might not be there yet,
318
00:16:22.640 --> 00:16:24.890
but after some month it will be there,
319
00:16:24.890 --> 00:16:29.310
and by then you should totally check that out, all right?
320
00:16:29.310 --> 00:16:32.480
Now, next up, a pure function is a function
321
00:16:32.480 --> 00:16:34.730
without side effects.
322
00:16:34.730 --> 00:16:38.000
So basically a function that does not mutate
323
00:16:38.000 --> 00:16:42.140
any external variables and that does also not depend
324
00:16:42.140 --> 00:16:44.290
on any external variables.
325
00:16:44.290 --> 00:16:48.630
So basically if we give the same inputs to a pure function,
326
00:16:48.630 --> 00:16:51.820
it will always return the same output.
327
00:16:51.820 --> 00:16:54.800
And again, that's because it does not depend
328
00:16:54.800 --> 00:16:56.820
on any external variables
329
00:16:56.820 --> 00:17:00.500
and it also does not manipulate them, okay?
330
00:17:00.500 --> 00:17:03.320
And again, we will talk more deeply about this
331
00:17:03.320 --> 00:17:07.260
in the functional programming with JavaScript section.
332
00:17:07.260 --> 00:17:09.908
But I'm telling you all this already at this point,
333
00:17:09.908 --> 00:17:13.570
so before that functional programming section,
334
00:17:13.570 --> 00:17:16.770
because this actually has implications on the way
335
00:17:16.770 --> 00:17:18.760
that we write or code.
336
00:17:18.760 --> 00:17:22.370
So even if you're not a functional programmer yet,
337
00:17:22.370 --> 00:17:24.560
you can still start to incorporate
338
00:17:24.560 --> 00:17:28.590
some functional programming techniques into your code.
339
00:17:28.590 --> 00:17:32.360
So for example, you can try to avoid data mutations
340
00:17:32.360 --> 00:17:34.380
as often as possible.
341
00:17:34.380 --> 00:17:37.430
And of course this will not always be possible,
342
00:17:37.430 --> 00:17:40.470
but it's also not really necessary.
343
00:17:40.470 --> 00:17:43.680
So these are mainly just suggestions,
344
00:17:43.680 --> 00:17:47.080
but which will still create more readable
345
00:17:47.080 --> 00:17:50.660
and overall better and cleaner code.
346
00:17:50.660 --> 00:17:52.720
So another thing that you can do
347
00:17:52.720 --> 00:17:55.480
is to always prefer built in methods
348
00:17:55.480 --> 00:17:58.870
or functions that do not produce side effects
349
00:17:58.870 --> 00:18:01.050
over the ones that do.
350
00:18:01.050 --> 00:18:04.980
And this is really important for data transformations.
351
00:18:04.980 --> 00:18:06.740
So whenever you want to do that,
352
00:18:06.740 --> 00:18:11.740
you should use a method such as map, filter, and reduce.
353
00:18:11.760 --> 00:18:14.500
So this is the functional and modern way
354
00:18:14.500 --> 00:18:16.800
of doing data transformations.
355
00:18:16.800 --> 00:18:19.680
And many times this is actually the first contact
356
00:18:19.680 --> 00:18:23.110
that many people have with functional programming.
357
00:18:23.110 --> 00:18:26.400
So map, filter, and reduce are actually present
358
00:18:26.400 --> 00:18:29.080
in all functional programming languages,
359
00:18:29.080 --> 00:18:33.000
and they are very important to implement functional code
360
00:18:33.000 --> 00:18:35.713
and more declarative code in our code.
361
00:18:36.630 --> 00:18:39.957
And finally, you can also try to avoid side effects
362
00:18:39.957 --> 00:18:43.150
in the functions that you write yourself.
363
00:18:43.150 --> 00:18:46.850
And again, this is of course not always possible
364
00:18:46.850 --> 00:18:49.510
and also not always necessary.
365
00:18:49.510 --> 00:18:52.920
So we will never be able to avoid all side effects
366
00:18:52.920 --> 00:18:54.410
in applications,
367
00:18:54.410 --> 00:18:56.580
because of course, at some point
368
00:18:56.580 --> 00:18:59.130
the application needs to do something.
369
00:18:59.130 --> 00:19:01.670
So we need to display something on the DOM
370
00:19:01.670 --> 00:19:03.910
or lock something to the console,
371
00:19:03.910 --> 00:19:08.000
or really create some side effect, okay?
372
00:19:08.000 --> 00:19:10.590
But you can still try to think about this
373
00:19:10.590 --> 00:19:13.470
and to start incorporating a side effects
374
00:19:13.470 --> 00:19:15.940
more into your own code.
375
00:19:15.940 --> 00:19:19.040
And why all of this is such a good idea,
376
00:19:19.040 --> 00:19:21.490
we will discuss at length again
377
00:19:21.490 --> 00:19:23.990
in the functional programming section.
378
00:19:23.990 --> 00:19:26.220
So this lecture here is really more about
379
00:19:26.220 --> 00:19:29.550
suggestions and things that you should start doing
380
00:19:29.550 --> 00:19:32.472
when you write your own code, all right?
381
00:19:32.472 --> 00:19:36.960
And now to finish, let's come back to declarative syntax,
382
00:19:36.960 --> 00:19:38.710
because functional programming
383
00:19:38.710 --> 00:19:43.290
is only a part of using and writing declarative code.
384
00:19:43.290 --> 00:19:46.700
So in order to write code debt is more declarative,
385
00:19:46.700 --> 00:19:49.850
you should use array and object destructuring
386
00:19:49.850 --> 00:19:51.840
whenever that's possible.
387
00:19:51.840 --> 00:19:54.310
You should also use the spread operator,
388
00:19:54.310 --> 00:19:58.110
the ternary operator, and also template literals
389
00:19:58.110 --> 00:19:59.960
whenever that is possible.
390
00:19:59.960 --> 00:20:01.830
Because if you think about it,
391
00:20:01.830 --> 00:20:05.220
then all of these four ways of writing code
392
00:20:05.220 --> 00:20:08.069
actually makes the code more declarative.
393
00:20:08.069 --> 00:20:11.760
So these operators are more about telling the code
394
00:20:11.760 --> 00:20:14.800
what to do and not exactly the steps
395
00:20:14.800 --> 00:20:17.050
that it should take, right?
396
00:20:17.050 --> 00:20:18.710
And that's again true
397
00:20:18.710 --> 00:20:23.160
for all these four pieces of syntax, all right.
398
00:20:23.160 --> 00:20:26.160
But that's enough talk for one lecture.
399
00:20:26.160 --> 00:20:28.570
And so let's now put some of these guidelines
400
00:20:28.570 --> 00:20:32.523
that I gave you for clean and modern code in practice.
32261
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.