WEBVTT 1 00:00:01.520 --> 00:00:02.850 So in this section, 2 00:00:02.850 --> 00:00:04.080 we have talked about 3 00:00:04.080 --> 00:00:06.900 modern JavaScript development practices, 4 00:00:06.900 --> 00:00:10.150 such as tooling and modules. 5 00:00:10.150 --> 00:00:12.510 Now since this is the section about 6 00:00:12.510 --> 00:00:14.840 how to write modern JavaScript, 7 00:00:14.840 --> 00:00:16.980 let's actually finish the section 8 00:00:16.980 --> 00:00:20.760 by reviewing clean and modern JavaScript coding style, 9 00:00:20.760 --> 00:00:22.440 and also take a brief look 10 00:00:22.440 --> 00:00:25.120 at some functional JavaScript principles, 11 00:00:25.120 --> 00:00:26.573 in the next video. 12 00:00:28.000 --> 00:00:31.180 And this lecture is actually mostly going to be 13 00:00:31.180 --> 00:00:32.960 a review lecture. 14 00:00:32.960 --> 00:00:35.720 So, a lecture where I'm gonna bring together 15 00:00:35.720 --> 00:00:40.370 all the clean and modern JavaScript techniques and practices 16 00:00:40.370 --> 00:00:43.370 that I've been showing you throughout the course. 17 00:00:43.370 --> 00:00:44.500 And so with this, 18 00:00:44.500 --> 00:00:47.683 you will then have all this information in one place. 19 00:00:48.520 --> 00:00:50.380 Then, in the next lecture, 20 00:00:50.380 --> 00:00:53.730 we will actually bring some of these topics to practice 21 00:00:53.730 --> 00:00:56.610 by fixing a bad coding example 22 00:00:56.610 --> 00:00:59.690 that does not follow these practices. 23 00:00:59.690 --> 00:01:02.393 But anyway, let's now get started. 24 00:01:03.290 --> 00:01:06.820 So, one of the most important things when you code, 25 00:01:06.820 --> 00:01:09.830 is that you should write readable code, 26 00:01:09.830 --> 00:01:13.000 which basically means that you should write code 27 00:01:13.000 --> 00:01:15.090 so that others can understand it, 28 00:01:15.090 --> 00:01:18.470 and also, so that you can understand it yourself 29 00:01:18.470 --> 00:01:20.220 in the future. 30 00:01:20.220 --> 00:01:23.840 Also you should try to avoid writing too clever 31 00:01:23.840 --> 00:01:26.650 and maybe over complicated solutions 32 00:01:26.650 --> 00:01:30.150 that might make you feel really smart as a developer, 33 00:01:30.150 --> 00:01:33.620 but which also might make your code very confusing 34 00:01:33.620 --> 00:01:35.160 and unreadable. 35 00:01:35.160 --> 00:01:37.610 And so in many situations it's best 36 00:01:37.610 --> 00:01:41.113 to simply write the most straightforward solutions. 37 00:01:41.980 --> 00:01:45.280 Another thing that's very important for readable code 38 00:01:45.280 --> 00:01:47.700 is to give functions and variables, 39 00:01:47.700 --> 00:01:49.710 very descriptive names. 40 00:01:49.710 --> 00:01:50.950 So for variables, 41 00:01:50.950 --> 00:01:54.270 you should name them according to what they contain, 42 00:01:54.270 --> 00:01:55.430 and for functions 43 00:01:55.430 --> 00:01:58.500 you should name them according to what they do. 44 00:01:58.500 --> 00:01:59.960 And so by doing this, 45 00:01:59.960 --> 00:02:02.280 you will make it really clear and obvious 46 00:02:02.280 --> 00:02:05.120 to everyone what each variable is, 47 00:02:05.120 --> 00:02:06.673 and what each function does. 48 00:02:07.640 --> 00:02:10.060 Next, there are some more general rules 49 00:02:10.060 --> 00:02:12.120 that you should follow in order to write 50 00:02:12.120 --> 00:02:13.970 modern and clean code, 51 00:02:13.970 --> 00:02:17.160 which are to use the DRY principle. 52 00:02:17.160 --> 00:02:19.110 So don't repeat yourself, 53 00:02:19.110 --> 00:02:22.950 which means that you should essentially refactor your code 54 00:02:22.950 --> 00:02:24.580 whenever you can. 55 00:02:24.580 --> 00:02:28.100 Also, you should not pollute the global namespace, 56 00:02:28.100 --> 00:02:32.140 and instead, encapsulate your data into functions 57 00:02:32.140 --> 00:02:34.820 or classes or modules. 58 00:02:34.820 --> 00:02:39.320 Also, you shouldn't use var for declaring variables. 59 00:02:39.320 --> 00:02:40.410 Right. 60 00:02:40.410 --> 00:02:43.990 So I've mentioned this one many times in the course. 61 00:02:43.990 --> 00:02:45.530 And so by now you already know 62 00:02:45.530 --> 00:02:47.610 that you should always use const 63 00:02:47.610 --> 00:02:50.160 and only if you want to change any variable, 64 00:02:50.160 --> 00:02:53.590 then use let, but never var. 65 00:02:53.590 --> 00:02:58.190 And finally, you should always use strong type checks. 66 00:02:58.190 --> 00:03:00.310 So always use the triple equals 67 00:03:00.310 --> 00:03:02.520 over the simple double equals, 68 00:03:02.520 --> 00:03:05.410 which do not perform type checks. 69 00:03:05.410 --> 00:03:07.290 Now about writing functions, 70 00:03:07.290 --> 00:03:09.510 which is one of the most important things 71 00:03:09.510 --> 00:03:12.190 that we do as JavaScript developers, 72 00:03:12.190 --> 00:03:15.470 and the main rule that we should follow by writing functions 73 00:03:15.470 --> 00:03:20.220 is that each function should usually only do one thing. 74 00:03:20.220 --> 00:03:21.340 All right. 75 00:03:21.340 --> 00:03:25.180 Now many times of course we will want to break that rule, 76 00:03:25.180 --> 00:03:28.510 but in general it's good to keep this rule in mind, 77 00:03:28.510 --> 00:03:31.760 so that you always write like small functions 78 00:03:31.760 --> 00:03:35.200 which only do one thing, but do it really well. 79 00:03:35.200 --> 00:03:36.430 All right? 80 00:03:36.430 --> 00:03:39.660 Next, you shouldn't use more than three parameters 81 00:03:39.660 --> 00:03:41.160 in a function. 82 00:03:41.160 --> 00:03:44.750 And this actually goes in line with the previous guideline 83 00:03:44.750 --> 00:03:48.640 because of course, if a function only does one thing, 84 00:03:48.640 --> 00:03:52.040 then probably it doesn't need so many parameters 85 00:03:52.040 --> 00:03:53.810 in the first place. 86 00:03:53.810 --> 00:03:56.800 Also use default parameters in your functions 87 00:03:56.800 --> 00:03:58.790 whenever that's possible, 88 00:03:58.790 --> 00:04:03.610 and in general return the same data type as you received. 89 00:04:03.610 --> 00:04:04.670 So for example, 90 00:04:04.670 --> 00:04:07.010 if you receive two or three numbers 91 00:04:07.010 --> 00:04:08.950 as an input to a function, 92 00:04:08.950 --> 00:04:12.530 then probably you will want to return a number as well. 93 00:04:12.530 --> 00:04:15.830 So that then makes more sense for when you consume, 94 00:04:15.830 --> 00:04:18.640 so for when you use the function later. 95 00:04:18.640 --> 00:04:21.820 And again, this is a rule that you can of course break, 96 00:04:21.820 --> 00:04:25.650 but it's again good to keep this one in mind. 97 00:04:25.650 --> 00:04:29.130 Finally, you can and should use arrow functions 98 00:04:29.130 --> 00:04:31.940 whenever they make the code more readable. 99 00:04:31.940 --> 00:04:33.030 Okay. 100 00:04:33.030 --> 00:04:36.470 And here, many people actually have different opinions. 101 00:04:36.470 --> 00:04:39.960 So some people started to use arrow functions everywhere, 102 00:04:39.960 --> 00:04:42.180 and some people don't like them at all, 103 00:04:42.180 --> 00:04:45.940 because they think that they completely make code unreadable 104 00:04:45.940 --> 00:04:47.980 no matter when they're used. 105 00:04:47.980 --> 00:04:52.160 But personally, I like to kind of follow a middle ground. 106 00:04:52.160 --> 00:04:55.130 So I still use the more regular functions 107 00:04:55.130 --> 00:04:56.790 in many situations. 108 00:04:56.790 --> 00:04:59.970 But if arrow functions make the code more readable, 109 00:04:59.970 --> 00:05:02.850 then I will totally use arrow functions. 110 00:05:02.850 --> 00:05:05.190 And one great use case in my opinion 111 00:05:05.190 --> 00:05:08.493 is in the callback functions of array methods. 112 00:05:09.330 --> 00:05:11.020 And now after functions 113 00:05:11.020 --> 00:05:14.380 our next topic is object-oriented programming. 114 00:05:14.380 --> 00:05:18.640 And in my opinion in order to implement OOP in JavaScript, 115 00:05:18.640 --> 00:05:21.630 you should now use ES6 classes. 116 00:05:21.630 --> 00:05:26.390 And so that's also what I did after OOP section. 117 00:05:26.390 --> 00:05:27.720 Right. 118 00:05:27.720 --> 00:05:29.990 Now when designing your classes, 119 00:05:29.990 --> 00:05:32.610 make sure that you encapsulate any data 120 00:05:32.610 --> 00:05:35.260 that shouldn't be accessible from the outside, 121 00:05:35.260 --> 00:05:39.760 so that you don't mutate that data from outside the class. 122 00:05:39.760 --> 00:05:40.990 All right. 123 00:05:40.990 --> 00:05:43.140 Now probably you will still need 124 00:05:43.140 --> 00:05:46.780 to at least manipulate some data that's in the class, 125 00:05:46.780 --> 00:05:50.460 but for that you should then implement a public API. 126 00:05:50.460 --> 00:05:53.660 So basically a couple of methods that can then manipulate 127 00:05:53.660 --> 00:05:57.453 that data exactly as you want that to happen. 128 00:05:58.340 --> 00:06:01.890 And again we talked about all of this already before. 129 00:06:01.890 --> 00:06:06.030 So this is really just a review of all these big topics 130 00:06:06.030 --> 00:06:09.353 that we have been handling throughout all of this course. 131 00:06:10.330 --> 00:06:14.000 Now as you implement your methods in your classes, 132 00:06:14.000 --> 00:06:17.720 make sure that you implement chaining in all the methods 133 00:06:17.720 --> 00:06:19.550 where it'll actually makes sense. 134 00:06:19.550 --> 00:06:23.430 Because this can make your methods way easier to use, 135 00:06:23.430 --> 00:06:24.840 not only for you, 136 00:06:24.840 --> 00:06:28.180 but maybe also for other developers on your team. 137 00:06:28.180 --> 00:06:31.000 So this is yet another great practice 138 00:06:31.000 --> 00:06:33.780 when you're writing your classes. 139 00:06:33.780 --> 00:06:37.200 Finally, one important thing to also mention here 140 00:06:37.200 --> 00:06:40.450 is that in regular objects when you're writing methods, 141 00:06:40.450 --> 00:06:43.540 then please don't use the arrow functions there. 142 00:06:43.540 --> 00:06:44.820 Because by doing that, 143 00:06:44.820 --> 00:06:49.120 you will not get access to the disk keywords of that object. 144 00:06:49.120 --> 00:06:52.740 Remember, and so always avoid arrow functions, 145 00:06:52.740 --> 00:06:55.760 even if you're not even using the disk keyword 146 00:06:55.760 --> 00:06:56.850 in a method. 147 00:06:56.850 --> 00:06:59.140 Because simply by getting into the habit 148 00:06:59.140 --> 00:07:03.460 of avoiding arrow functions as methods in this situation, 149 00:07:03.460 --> 00:07:07.220 you'll then not commit any mistakes ever. 150 00:07:07.220 --> 00:07:08.620 All right. 151 00:07:08.620 --> 00:07:09.580 Okay. 152 00:07:09.580 --> 00:07:13.860 Next up, let's talk about avoiding nested code. 153 00:07:13.860 --> 00:07:15.860 So writing nested code, 154 00:07:15.860 --> 00:07:19.540 which basically means writing code inside of blocks 155 00:07:19.540 --> 00:07:23.200 inside of other blocks is really really bad 156 00:07:23.200 --> 00:07:24.960 for readable code. 157 00:07:24.960 --> 00:07:29.180 And so we should avoid nested code at all costs. 158 00:07:29.180 --> 00:07:32.240 And one great way of avoiding nested code 159 00:07:32.240 --> 00:07:34.130 is to use guard clauses, 160 00:07:34.130 --> 00:07:35.300 as we have been doing 161 00:07:35.300 --> 00:07:38.590 over the last couple of sections, right. 162 00:07:38.590 --> 00:07:41.380 So guard clauses basically simply means 163 00:07:41.380 --> 00:07:46.380 to use an early return, in case some condition is not met. 164 00:07:47.150 --> 00:07:50.220 Also you can use the ternary operator, 165 00:07:50.220 --> 00:07:54.340 or even logical operators instead of an if statement. 166 00:07:54.340 --> 00:07:56.790 Because the ternary operator of course 167 00:07:56.790 --> 00:07:59.020 does not create a new code block, 168 00:07:59.020 --> 00:08:01.720 while the if statement does. 169 00:08:01.720 --> 00:08:04.730 Now if you really do need an if statement, 170 00:08:04.730 --> 00:08:07.700 then instead of an if else statement, 171 00:08:07.700 --> 00:08:10.600 you should use multiple ifs instead. 172 00:08:10.600 --> 00:08:14.350 Because again, this will make code a lot more readable 173 00:08:14.350 --> 00:08:18.020 than having to go through all these if and else if, 174 00:08:18.020 --> 00:08:20.010 and else blocks. 175 00:08:20.010 --> 00:08:22.433 So that's also another modern practice 176 00:08:22.433 --> 00:08:24.510 that we start to see more and more 177 00:08:24.510 --> 00:08:27.033 in modern JavaScript code basis. 178 00:08:28.110 --> 00:08:32.530 Next, you should completely avoid any kind of loops. 179 00:08:32.530 --> 00:08:35.030 And with that I mean any for loops. 180 00:08:35.030 --> 00:08:38.190 So the for, and also the for of loops, 181 00:08:38.190 --> 00:08:41.960 should be avoided if you want to avoid nested code. 182 00:08:41.960 --> 00:08:46.040 And so instead, you can use array methods like a map, 183 00:08:46.040 --> 00:08:48.150 filter and reduce. 184 00:08:48.150 --> 00:08:50.970 And finally, you should avoid callback-based 185 00:08:50.970 --> 00:08:54.230 asynchronous API's whenever you can. 186 00:08:54.230 --> 00:08:57.500 And so that actually brings us to our next topic, 187 00:08:57.500 --> 00:08:59.293 which is asynchronous code. 188 00:09:00.370 --> 00:09:02.520 So for best readability, 189 00:09:02.520 --> 00:09:05.850 always consume Promises using async/await 190 00:09:05.850 --> 00:09:09.270 and not using the den and the catch methods. 191 00:09:09.270 --> 00:09:13.230 Because these methods actually require callback functions, 192 00:09:13.230 --> 00:09:16.580 which will then introduce even more nested code. 193 00:09:16.580 --> 00:09:18.120 And so that's again, 194 00:09:18.120 --> 00:09:21.840 something that we really want to avoid, all alright. 195 00:09:21.840 --> 00:09:24.620 So these two go kind of together. 196 00:09:24.620 --> 00:09:28.010 So avoiding callback based asynchronous API's, 197 00:09:28.010 --> 00:09:30.970 and instead opting for using Promises 198 00:09:30.970 --> 00:09:34.950 and then consume these Promises with async/await. 199 00:09:34.950 --> 00:09:37.460 Now, something that's very important 200 00:09:37.460 --> 00:09:39.420 is that whenever you can, 201 00:09:39.420 --> 00:09:42.020 you should run Promises in parallel 202 00:09:42.020 --> 00:09:45.600 using the Promise.all combinator function. 203 00:09:45.600 --> 00:09:49.890 So when you have two Promises that can run at the same time, 204 00:09:49.890 --> 00:09:53.300 so Promises that do not depend on each other, 205 00:09:53.300 --> 00:09:55.460 then please run them in parallel 206 00:09:55.460 --> 00:09:59.810 to make the application a little bit faster for your users. 207 00:09:59.810 --> 00:10:04.470 And finally, always handle errors and Promise rejections. 208 00:10:04.470 --> 00:10:08.230 So this is simply a best practice for clean code. 209 00:10:08.230 --> 00:10:09.270 Now right. 210 00:10:09.270 --> 00:10:13.520 So these are the main best practices for writing modern 211 00:10:13.520 --> 00:10:16.850 and clean JavaScript code that I can think of. 212 00:10:16.850 --> 00:10:19.230 And so let's now put some of these guidelines 213 00:10:19.230 --> 00:10:23.193 that I gave you for clean and modern code in practice.