WEBVTT 1 00:00:01.530 --> 00:00:02.940 So in the last lecture, 2 00:00:02.940 --> 00:00:05.430 we implemented a brand new class 3 00:00:05.430 --> 00:00:08.760 which showed us the need for encapsulation, 4 00:00:08.760 --> 00:00:10.710 so for data privacy. 5 00:00:10.710 --> 00:00:14.190 And so let's now tackle this very important principle 6 00:00:14.190 --> 00:00:16.503 of object oriented programming. 7 00:00:18.030 --> 00:00:22.050 Now, first off, remember that encapsulation basically means 8 00:00:22.050 --> 00:00:26.850 to keep some properties and methods private inside the class 9 00:00:26.850 --> 00:00:30.900 so that they're not accessible from outside the class. 10 00:00:30.900 --> 00:00:34.230 And then we simply expose some of the methods 11 00:00:34.230 --> 00:00:37.920 as a public interface, which we then call an API. 12 00:00:37.920 --> 00:00:39.480 And so those are the methods 13 00:00:39.480 --> 00:00:42.750 that we will allow other developers to use, 14 00:00:42.750 --> 00:00:45.180 so from outside of the class. 15 00:00:45.180 --> 00:00:48.780 And we also call this whole idea data privacy, 16 00:00:48.780 --> 00:00:51.030 and it's really essential to do this 17 00:00:51.030 --> 00:00:54.750 in anything more than a toy application. 18 00:00:54.750 --> 00:00:57.630 Now, as we learned earlier, there are two big reasons 19 00:00:57.630 --> 00:01:01.170 why we need encapsulation and data privacy. 20 00:01:01.170 --> 00:01:05.160 First, it's to prevent code from outside a certain class 21 00:01:05.160 --> 00:01:07.800 to accidentally manipulate our data 22 00:01:07.800 --> 00:01:10.080 that lives inside the class. 23 00:01:10.080 --> 00:01:11.730 And this can happen, for example, 24 00:01:11.730 --> 00:01:15.090 when someone interacts with an object's properties 25 00:01:15.090 --> 00:01:19.230 that no one is supposed to read or to set manually. 26 00:01:19.230 --> 00:01:22.500 And the second reason why we need data privacy 27 00:01:22.500 --> 00:01:26.400 is that when we expose only a small interface, 28 00:01:26.400 --> 00:01:29.490 so that small API that I just mentioned, 29 00:01:29.490 --> 00:01:32.430 just consisting of a few public methods, 30 00:01:32.430 --> 00:01:35.610 then we can change all the other internal methods 31 00:01:35.610 --> 00:01:38.940 inside the class with a lot more confidence. 32 00:01:38.940 --> 00:01:42.210 Because we can then be sure that external code 33 00:01:42.210 --> 00:01:44.700 does not rely on these methods, 34 00:01:44.700 --> 00:01:46.650 and so code will not break 35 00:01:46.650 --> 00:01:49.290 when we do these internal changes. 36 00:01:49.290 --> 00:01:53.430 So that's a bit of a recap of why we need data privacy. 37 00:01:53.430 --> 00:01:55.830 But now about the implementation, 38 00:01:55.830 --> 00:01:57.600 the way that encapsulation 39 00:01:57.600 --> 00:02:00.750 is actually implemented in JavaScript classes 40 00:02:00.750 --> 00:02:03.900 is by using something that we call private fields 41 00:02:03.900 --> 00:02:05.820 and private methods. 42 00:02:05.820 --> 00:02:09.390 And these are part of a big feature called class fields, 43 00:02:09.390 --> 00:02:14.250 which was only introduced to JavaScript classes in ES2022. 44 00:02:14.250 --> 00:02:16.320 So a few years after classes 45 00:02:16.320 --> 00:02:19.140 were initially introduced in ES6, 46 00:02:19.140 --> 00:02:22.410 which is now actually over 10 years ago. 47 00:02:22.410 --> 00:02:27.360 But anyway, before we now go use these class fields, 48 00:02:27.360 --> 00:02:30.360 let's talk a bit about this new feature. 49 00:02:30.360 --> 00:02:34.830 So for starters, why is this even called class fields 50 00:02:34.830 --> 00:02:36.900 and not something else? 51 00:02:36.900 --> 00:02:38.760 Well, in more traditional 52 00:02:38.760 --> 00:02:41.190 object oriented programming languages, 53 00:02:41.190 --> 00:02:44.160 which are usually based on real classes, 54 00:02:44.160 --> 00:02:46.560 what we call properties in JavaScript 55 00:02:46.560 --> 00:02:48.810 are usually called fields. 56 00:02:48.810 --> 00:02:52.020 So again, in these other more OOP languages, 57 00:02:52.020 --> 00:02:54.570 these properties are called fields. 58 00:02:54.570 --> 00:02:57.300 And actually that's where some of the problems 59 00:02:57.300 --> 00:03:01.410 with this new class fields feature actually start. 60 00:03:01.410 --> 00:03:03.300 Because with class fields, 61 00:03:03.300 --> 00:03:06.270 we are now moving away from this idea 62 00:03:06.270 --> 00:03:08.940 that classes are just synthetic sugar 63 00:03:08.940 --> 00:03:11.310 over construction functions. 64 00:03:11.310 --> 00:03:15.330 So with this new class features like these class fields, 65 00:03:15.330 --> 00:03:18.150 classes now start to have abilities 66 00:03:18.150 --> 00:03:20.730 that we didn't have previously. 67 00:03:20.730 --> 00:03:23.490 So originally, there was no easy way 68 00:03:23.490 --> 00:03:25.650 of hiding properties or methods 69 00:03:25.650 --> 00:03:29.580 from the outside of a class or of a constructor functions. 70 00:03:29.580 --> 00:03:32.400 But again, with private class fields, 71 00:03:32.400 --> 00:03:34.680 we'll actually be able to do that. 72 00:03:34.680 --> 00:03:37.140 And so this is forcing the class pattern 73 00:03:37.140 --> 00:03:39.120 even more into JavaScript, 74 00:03:39.120 --> 00:03:42.780 which again is not a class based language. 75 00:03:42.780 --> 00:03:45.570 It is a prototype based language, 76 00:03:45.570 --> 00:03:47.610 but now it's looking more and more 77 00:03:47.610 --> 00:03:51.990 like a class based language like Java or C++. 78 00:03:51.990 --> 00:03:55.740 Well, at least when it comes to object oriented programming. 79 00:03:55.740 --> 00:03:59.610 And many developers consider this to be a big problem. 80 00:03:59.610 --> 00:04:01.740 So there was actually a lot of noise 81 00:04:01.740 --> 00:04:05.160 around this feature when it first came out. 82 00:04:05.160 --> 00:04:07.980 Now, personally, in my own opinion, 83 00:04:07.980 --> 00:04:11.250 I'm not sure if this is actually such a big deal 84 00:04:11.250 --> 00:04:13.680 for the average JavaScript developer. 85 00:04:13.680 --> 00:04:17.340 So as long as you still understand how prototype inheritance 86 00:04:17.340 --> 00:04:19.260 and function constructors work, 87 00:04:19.260 --> 00:04:21.960 I believe that you'll be just fine. 88 00:04:21.960 --> 00:04:25.410 But now enough talking, let's actually get to work 89 00:04:25.410 --> 00:04:28.560 and learn about these class fields. 90 00:04:28.560 --> 00:04:30.750 So as a part of these feature, 91 00:04:30.750 --> 00:04:34.560 let me now actually write what exactly we have. 92 00:04:34.560 --> 00:04:38.523 So first we have public fields. 93 00:04:39.690 --> 00:04:42.000 So this will be nice for you to keep here 94 00:04:42.000 --> 00:04:44.760 so that you know exactly what we're gonna learn 95 00:04:44.760 --> 00:04:49.200 and also what is part of these fields feature. 96 00:04:49.200 --> 00:04:50.430 So, again, public fields. 97 00:04:50.430 --> 00:04:53.580 Then we have private fields. 98 00:04:53.580 --> 00:04:57.660 So these will allow us to implement encapsulation. 99 00:04:57.660 --> 00:05:02.070 Then we have public methods, 100 00:05:02.070 --> 00:05:03.780 which are basically just the methods 101 00:05:03.780 --> 00:05:05.610 that we've been using all along, 102 00:05:05.610 --> 00:05:08.520 like the deposit or withdraw methods. 103 00:05:08.520 --> 00:05:10.890 So those are simply public methods. 104 00:05:10.890 --> 00:05:15.160 And then finally, we also have private methods. 105 00:05:16.230 --> 00:05:19.890 And then at the end, so besides these four, 106 00:05:19.890 --> 00:05:23.040 there's also a static version of these four, 107 00:05:23.040 --> 00:05:27.330 static version of these four, 108 00:05:27.330 --> 00:05:29.100 which we're not gonna talk about here 109 00:05:29.100 --> 00:05:31.080 because they are a lot less important. 110 00:05:31.080 --> 00:05:34.470 So we're just gonna basically create four examples 111 00:05:34.470 --> 00:05:36.360 of these four right here, 112 00:05:36.360 --> 00:05:39.630 and let's simply start with the public fields. 113 00:05:39.630 --> 00:05:43.620 So first of all, what actually is a field? 114 00:05:43.620 --> 00:05:46.650 Well, we can think of a field as a property 115 00:05:46.650 --> 00:05:49.920 that will be on all the class instances. 116 00:05:49.920 --> 00:05:53.760 And so that's why we also call this a public instance field. 117 00:05:53.760 --> 00:05:56.880 This means that we can declare everything as a field 118 00:05:56.880 --> 00:06:00.030 that want to be present on all the instances, 119 00:06:00.030 --> 00:06:01.830 but not on the prototype. 120 00:06:01.830 --> 00:06:03.810 And this is important to understand. 121 00:06:03.810 --> 00:06:07.500 So again, these fields will not get inherited, 122 00:06:07.500 --> 00:06:10.740 so unlike methods that will be added to the prototype 123 00:06:10.740 --> 00:06:13.260 for instances to inherit them. 124 00:06:13.260 --> 00:06:16.800 So basically these fields are just like adding properties 125 00:06:16.800 --> 00:06:20.190 to the constructor like we are doing here. 126 00:06:20.190 --> 00:06:23.790 But now we can do this, instead of in the constructor, 127 00:06:23.790 --> 00:06:27.540 we can declare some of these here as these public fields 128 00:06:27.540 --> 00:06:29.340 or also as private fields. 129 00:06:29.340 --> 00:06:32.550 But for now, let's start with public fields. 130 00:06:32.550 --> 00:06:35.880 So for example, here, this locale here 131 00:06:35.880 --> 00:06:40.350 should probably be present on all the class instances, 132 00:06:40.350 --> 00:06:44.490 because it doesn't even depend on the input, right? 133 00:06:44.490 --> 00:06:46.350 So when we create a new instance, 134 00:06:46.350 --> 00:06:49.380 we pass in the owner, currency and pin. 135 00:06:49.380 --> 00:06:51.903 So remember that from the last lecture. 136 00:06:53.550 --> 00:06:56.220 So, yeah, exactly as we're doing here. 137 00:06:56.220 --> 00:06:58.290 So basically what I did here, by the way, 138 00:06:58.290 --> 00:07:01.440 was just to copy and paste this exact class 139 00:07:01.440 --> 00:07:04.110 that we created in the last lecture. 140 00:07:04.110 --> 00:07:07.980 But, again, what we pass in are these three data points 141 00:07:07.980 --> 00:07:11.460 and so the instance will of course then depend on these, 142 00:07:11.460 --> 00:07:15.630 but all of them will get this exact same locale, right? 143 00:07:15.630 --> 00:07:19.653 And so this is a great candidate for becoming a field. 144 00:07:20.550 --> 00:07:24.420 So let's declare a field and we just do that here outside. 145 00:07:24.420 --> 00:07:26.850 So basically where we also place everything else 146 00:07:26.850 --> 00:07:30.030 like the methods, the constructor and so on. 147 00:07:30.030 --> 00:07:32.070 Let's do this here actually 148 00:07:32.070 --> 00:07:34.050 before the constructor functions. 149 00:07:34.050 --> 00:07:36.030 And so this is now very easy. 150 00:07:36.030 --> 00:07:41.030 We just type locale, then equal and navigator-locale 151 00:07:43.020 --> 00:07:44.970 just like before. 152 00:07:44.970 --> 00:07:46.800 And that's actually it. 153 00:07:46.800 --> 00:07:50.070 Now here, we do need to specify semicolons, 154 00:07:50.070 --> 00:07:53.370 which is a bit weird because we don't need those 155 00:07:53.370 --> 00:07:56.490 after the methods here and after this function. 156 00:07:56.490 --> 00:07:58.173 But here, we do need them. 157 00:07:59.610 --> 00:08:01.980 All right, so we can just get rid of this. 158 00:08:01.980 --> 00:08:04.890 Maybe let's comment it out just to see the difference. 159 00:08:04.890 --> 00:08:07.470 So here, we need no disc keyword, 160 00:08:07.470 --> 00:08:10.140 and also we don't use any const 161 00:08:10.140 --> 00:08:12.390 or let or anything like this. 162 00:08:12.390 --> 00:08:15.480 So just the name of the field and then the value. 163 00:08:15.480 --> 00:08:17.430 And so if we now, 164 00:08:17.430 --> 00:08:20.823 let's just log this account to the console, 165 00:08:23.340 --> 00:08:25.320 then just like before, 166 00:08:25.320 --> 00:08:28.380 we will see that the locale is actually here. 167 00:08:28.380 --> 00:08:30.960 Well, for some reason it is undefined. 168 00:08:30.960 --> 00:08:33.940 And, yeah, actually here it is 169 00:08:35.160 --> 00:08:37.830 language, not locale. 170 00:08:37.830 --> 00:08:40.110 So now we get that locale. 171 00:08:40.110 --> 00:08:43.050 And if we were to create another account object, 172 00:08:43.050 --> 00:08:45.240 then this would get the exact same value. 173 00:08:45.240 --> 00:08:49.200 So again, this is now here on every single instance, 174 00:08:49.200 --> 00:08:51.960 but if we look at the prototype chain, 175 00:08:51.960 --> 00:08:53.580 then of course it is not there. 176 00:08:53.580 --> 00:08:58.580 So this here only the five methods that we have here 177 00:08:59.040 --> 00:09:01.743 or the four methods plus the constructor. 178 00:09:02.700 --> 00:09:05.070 All right, let's say we want another one. 179 00:09:05.070 --> 00:09:07.860 Let's say the name of the bank maybe. 180 00:09:07.860 --> 00:09:09.627 So this can also be on all of them. 181 00:09:09.627 --> 00:09:12.660 And so here, let's do again Bankist 182 00:09:12.660 --> 00:09:16.590 like we had in some other previous project. 183 00:09:16.590 --> 00:09:18.300 And there we go. 184 00:09:18.300 --> 00:09:19.860 So writing it like this 185 00:09:19.860 --> 00:09:24.570 would have been exactly the same as doing this.bank 186 00:09:24.570 --> 00:09:26.493 and then equals Bankist here. 187 00:09:27.540 --> 00:09:29.370 So the exact same thing, 188 00:09:29.370 --> 00:09:31.650 but having these fields here, 189 00:09:31.650 --> 00:09:34.200 which are the same on every single instance, 190 00:09:34.200 --> 00:09:37.320 which makes the class a little bit more self-documenting, 191 00:09:37.320 --> 00:09:40.950 which is one of the good reasons for using this. 192 00:09:40.950 --> 00:09:44.850 So let's get rid of them here. 193 00:09:44.850 --> 00:09:48.870 And so yeah, these are the public fields. 194 00:09:48.870 --> 00:09:51.810 And so now let's move on to private fields. 195 00:09:51.810 --> 00:09:53.910 So private fields, the idea behind them 196 00:09:53.910 --> 00:09:57.180 is exactly the same as with these public fields, 197 00:09:57.180 --> 00:09:59.760 but with the difference that they cannot be accessed 198 00:09:59.760 --> 00:10:01.530 from the outside. 199 00:10:01.530 --> 00:10:06.060 And so one great candidate for this is these movements. 200 00:10:06.060 --> 00:10:07.860 So it makes a lot of sense 201 00:10:07.860 --> 00:10:10.290 to protect this mission critical data 202 00:10:10.290 --> 00:10:13.170 from any interference from the outside. 203 00:10:13.170 --> 00:10:15.780 And so then no one can accidentally 204 00:10:15.780 --> 00:10:19.770 or even on purpose manipulate this data here. 205 00:10:19.770 --> 00:10:23.343 So right now, let's just see an example of that. 206 00:10:24.360 --> 00:10:26.940 So let's say that we do everything normal. 207 00:10:26.940 --> 00:10:30.723 For example, we just deposit some value here, 208 00:10:32.040 --> 00:10:33.873 then we withdraw something, 209 00:10:36.840 --> 00:10:38.610 let's say 100. 210 00:10:38.610 --> 00:10:43.350 And so, yeah, of course, these movements then show up here. 211 00:10:43.350 --> 00:10:45.960 But what if then, for some reason, 212 00:10:45.960 --> 00:10:50.040 we would do acc1.movements 213 00:10:50.040 --> 00:10:52.110 and set them back to an empty ray, 214 00:10:52.110 --> 00:10:54.810 essentially erasing the entire history? 215 00:10:54.810 --> 00:10:56.910 So that would indeed work. 216 00:10:56.910 --> 00:11:00.120 So there we go, but this is very, very bad. 217 00:11:00.120 --> 00:11:03.630 So we do not want to allow this kind of interference 218 00:11:03.630 --> 00:11:06.000 with the data from the outside, 219 00:11:06.000 --> 00:11:08.670 or movements should only be accessed 220 00:11:08.670 --> 00:11:13.670 or should only be read and manipulated by deposit, withdraw, 221 00:11:14.310 --> 00:11:16.770 and maybe some other method that we can create 222 00:11:16.770 --> 00:11:19.770 so that someone can check out the movements. 223 00:11:19.770 --> 00:11:23.673 So instead of having to do something like this. 224 00:11:28.230 --> 00:11:32.670 So, again, we do not want anyone to allow to do this, 225 00:11:32.670 --> 00:11:35.430 so manipulating this data from the outside 226 00:11:35.430 --> 00:11:38.490 without using our public API. 227 00:11:38.490 --> 00:11:42.960 And so what we want to do is to protect this field. 228 00:11:42.960 --> 00:11:45.960 Once again, this actually doesn't even depend 229 00:11:45.960 --> 00:11:47.160 on the input here. 230 00:11:47.160 --> 00:11:48.810 So we can just declare it here, 231 00:11:48.810 --> 00:11:51.030 just like all the other fields with the difference 232 00:11:51.030 --> 00:11:54.240 that we start with this hash symbol here. 233 00:11:54.240 --> 00:11:58.503 So # and then just the name of the field, 234 00:11:59.580 --> 00:12:01.890 which is just an empty array. 235 00:12:01.890 --> 00:12:04.620 And then we can remove it from here. 236 00:12:04.620 --> 00:12:05.820 And there we go. 237 00:12:05.820 --> 00:12:09.060 With this, we just protected the movements array. 238 00:12:09.060 --> 00:12:10.680 Now we will get some errors here 239 00:12:10.680 --> 00:12:15.680 because this field is now actually really called #movement. 240 00:12:16.860 --> 00:12:20.133 And so here we now need to change this name. 241 00:12:21.270 --> 00:12:23.400 So #movements, 242 00:12:23.400 --> 00:12:26.403 and it is actually called movements, not just movement. 243 00:12:27.450 --> 00:12:30.960 And I think that's actually it. 244 00:12:30.960 --> 00:12:32.340 Let's save it. 245 00:12:32.340 --> 00:12:34.230 And, yeah. 246 00:12:34.230 --> 00:12:37.620 So again, you see that now it is called movements here 247 00:12:37.620 --> 00:12:40.050 like this or actually like this. 248 00:12:40.050 --> 00:12:44.070 So that's the hash and that's the array of course 249 00:12:44.070 --> 00:12:46.530 with the two values that we specified here. 250 00:12:46.530 --> 00:12:48.900 But then what happened here? 251 00:12:48.900 --> 00:12:51.690 So this was earlier the line of code 252 00:12:51.690 --> 00:12:54.810 which reset or deposits and withdrawals. 253 00:12:54.810 --> 00:12:56.400 But now what this will do 254 00:12:56.400 --> 00:12:58.980 is to just create a brand new property 255 00:12:58.980 --> 00:13:00.840 and set that to an empty array. 256 00:13:00.840 --> 00:13:02.880 So that's this one right here. 257 00:13:02.880 --> 00:13:03.960 But that's not a problem 258 00:13:03.960 --> 00:13:07.590 because the code inside our class is no longer using this. 259 00:13:07.590 --> 00:13:09.570 So we could also just specify 260 00:13:09.570 --> 00:13:12.090 really something here like this. 261 00:13:12.090 --> 00:13:15.240 And so then after this line of code here runs, 262 00:13:15.240 --> 00:13:18.060 the object would then look like this. 263 00:13:18.060 --> 00:13:21.303 So it would then have this weird array with this weird name. 264 00:13:22.890 --> 00:13:25.590 All right, now here, when we try to access this movement, 265 00:13:25.590 --> 00:13:27.300 it no longer exists. 266 00:13:27.300 --> 00:13:31.530 But what happens when we try to actually access 267 00:13:31.530 --> 00:13:34.470 our private movements that we just created? 268 00:13:34.470 --> 00:13:37.800 So indeed we get private field must be declared 269 00:13:37.800 --> 00:13:39.360 in an enclosing class. 270 00:13:39.360 --> 00:13:42.390 Or in other words, we can only use this #movements 271 00:13:42.390 --> 00:13:44.070 inside of the class. 272 00:13:44.070 --> 00:13:48.120 So let's remove this here and nice. 273 00:13:48.120 --> 00:13:50.490 Now we can actually, as you just saw, 274 00:13:50.490 --> 00:13:53.580 still see this property here in the account, 275 00:13:53.580 --> 00:13:55.500 but that's not what private means. 276 00:13:55.500 --> 00:13:59.400 So private simply means that the data cannot be accessed. 277 00:13:59.400 --> 00:14:01.800 So it cannot be read or be mutated 278 00:14:01.800 --> 00:14:04.410 from anywhere outside of the class. 279 00:14:04.410 --> 00:14:08.070 So that is exactly the goal of this. 280 00:14:08.070 --> 00:14:08.903 Great. 281 00:14:08.903 --> 00:14:10.230 Now let's do another one 282 00:14:10.230 --> 00:14:14.160 and let's now also make the pin here private. 283 00:14:14.160 --> 00:14:15.870 Now this one is a little bit different 284 00:14:15.870 --> 00:14:19.380 because it does actually depend on the input data, 285 00:14:19.380 --> 00:14:22.230 which we can only read here in the constructor, 286 00:14:22.230 --> 00:14:23.730 but not here. 287 00:14:23.730 --> 00:14:27.840 But it is here where we have to specify the private field. 288 00:14:27.840 --> 00:14:29.550 So what do we do? 289 00:14:29.550 --> 00:14:32.100 Well, just like with regular variables, 290 00:14:32.100 --> 00:14:35.190 we can just define the variable here first. 291 00:14:35.190 --> 00:14:38.070 So just like a let variable. 292 00:14:38.070 --> 00:14:41.250 So we just define the private field here 293 00:14:41.250 --> 00:14:42.870 without giving it any value, 294 00:14:42.870 --> 00:14:45.870 and then we assign the value to it right here. 295 00:14:45.870 --> 00:14:49.653 We just need to make sure that we change the new name. 296 00:14:51.270 --> 00:14:53.640 And so then this is all we need to do. 297 00:14:53.640 --> 00:14:55.623 Now without this line of code here, 298 00:14:56.580 --> 00:14:58.140 so if we just comment this out, 299 00:14:58.140 --> 00:15:00.990 then notice how this private pin here 300 00:15:00.990 --> 00:15:02.490 would just be undefined. 301 00:15:02.490 --> 00:15:07.110 So just like a let variable without any value, all right, 302 00:15:07.110 --> 00:15:10.380 but then we do this and so then it becomes 1111, 303 00:15:10.380 --> 00:15:12.990 which is the value that we pass in here. 304 00:15:12.990 --> 00:15:16.440 And we don't even use this pin anywhere here in the cods, 305 00:15:16.440 --> 00:15:18.570 and so we don't need to change anything else. 306 00:15:18.570 --> 00:15:21.900 So this was just an example here anyway. 307 00:15:21.900 --> 00:15:24.420 Now if we think about this, actually in this example, 308 00:15:24.420 --> 00:15:28.380 we could convert everything here to private fields, 309 00:15:28.380 --> 00:15:31.590 but let's keep it simple and just do these ones here. 310 00:15:31.590 --> 00:15:34.410 So I only did this one to demonstrate 311 00:15:34.410 --> 00:15:38.640 how we can first declare basically this field out here 312 00:15:38.640 --> 00:15:41.490 and then define its value inside the constructor, 313 00:15:41.490 --> 00:15:42.900 which is where we have access 314 00:15:42.900 --> 00:15:47.430 to that input value of the pin now, right? 315 00:15:47.430 --> 00:15:50.280 So we already worked on these two. 316 00:15:50.280 --> 00:15:52.890 Let's now move on to public methods. 317 00:15:52.890 --> 00:15:56.520 So these public methods are exactly the methods 318 00:15:56.520 --> 00:15:58.800 that we have worked up until this point. 319 00:15:58.800 --> 00:16:01.530 So all of these methods that we have right here 320 00:16:01.530 --> 00:16:03.210 are right now public, 321 00:16:03.210 --> 00:16:05.940 and so they're part of the public interface, 322 00:16:05.940 --> 00:16:09.570 which we also call or API. 323 00:16:09.570 --> 00:16:10.950 Not like this. (laughs) 324 00:16:10.950 --> 00:16:12.630 Yeah, API. 325 00:16:12.630 --> 00:16:14.370 So nothing new to do here. 326 00:16:14.370 --> 00:16:17.370 Let's just, as I mentioned earlier, 327 00:16:17.370 --> 00:16:20.670 create this new method called get movements 328 00:16:20.670 --> 00:16:23.880 so that we actually give users of this class. 329 00:16:23.880 --> 00:16:27.120 So some other developer that wants to use this class 330 00:16:27.120 --> 00:16:32.120 in the rest of the code a way to read the movements. 331 00:16:35.010 --> 00:16:38.523 All right, so that's exactly what the API is for. 332 00:16:39.630 --> 00:16:44.630 So giving other developers ways to interact with our data. 333 00:16:44.880 --> 00:16:49.880 So here we just return this.movements and there we go. 334 00:16:52.920 --> 00:16:54.630 So nothing new here. 335 00:16:54.630 --> 00:16:56.700 And so let's now move on to the last part, 336 00:16:56.700 --> 00:16:58.680 which are the private methods. 337 00:16:58.680 --> 00:17:00.300 And just like private fields, 338 00:17:00.300 --> 00:17:03.390 they look exactly like the public counterpart, 339 00:17:03.390 --> 00:17:05.703 but with the # symbol. 340 00:17:06.750 --> 00:17:11.190 So remember how we had this approved loan method here, 341 00:17:11.190 --> 00:17:14.040 which was seen more of an internal method 342 00:17:14.040 --> 00:17:16.500 that is used by the request loan 343 00:17:16.500 --> 00:17:20.430 and therefore we do not want to expose this one right here. 344 00:17:20.430 --> 00:17:25.430 Users of this class should only be able to deposit, 345 00:17:26.010 --> 00:17:28.650 withdraw, and see the movements, 346 00:17:28.650 --> 00:17:32.400 and also to request loans, but not to approve them. 347 00:17:32.400 --> 00:17:36.663 So remember, this method here is kind of a fake method. 348 00:17:37.830 --> 00:17:41.370 Fake method that's why it's only returns 349 00:17:41.370 --> 00:17:42.840 simply true right now, 350 00:17:42.840 --> 00:17:44.910 but it could have some complex algorithm 351 00:17:44.910 --> 00:17:48.810 which would determine whether a loan can be approved or not. 352 00:17:48.810 --> 00:17:52.500 And so makes sense to just be an internal method. 353 00:17:52.500 --> 00:17:55.143 And therefore let's just do this. 354 00:17:56.030 --> 00:17:59.730 And so just like that, we converted this public method 355 00:17:59.730 --> 00:18:00.903 to a private method. 356 00:18:01.890 --> 00:18:03.180 Very easy, right? 357 00:18:03.180 --> 00:18:08.180 Let's just, really to make sure, try to run this here, 358 00:18:10.350 --> 00:18:14.580 approve a loan with some value here. 359 00:18:14.580 --> 00:18:17.070 And then indeed, private field. 360 00:18:17.070 --> 00:18:20.430 So here the browser also calls this a private field 361 00:18:20.430 --> 00:18:22.563 must be declared in an enclosing class. 362 00:18:23.550 --> 00:18:24.570 Okay? 363 00:18:24.570 --> 00:18:25.403 Great. 364 00:18:25.403 --> 00:18:28.920 So with this, we just removed this approved loan method 365 00:18:28.920 --> 00:18:31.983 from the public API of our class. 366 00:18:32.820 --> 00:18:34.680 All right. Great. 367 00:18:34.680 --> 00:18:38.160 So just to recap, we talked about public fields, 368 00:18:38.160 --> 00:18:41.760 private fields, and public and private methods. 369 00:18:41.760 --> 00:18:45.330 And then there's also the static version of these four. 370 00:18:45.330 --> 00:18:50.330 So static public fields, static private fields, and so on. 371 00:18:50.340 --> 00:18:52.770 And remember how we actually already used 372 00:18:52.770 --> 00:18:55.980 a static public method here before 373 00:18:55.980 --> 00:18:57.870 in some of the earlier lectures. 374 00:18:57.870 --> 00:19:00.090 And so therefore there is no need 375 00:19:00.090 --> 00:19:03.840 to now implement these static versions of these four again. 376 00:19:03.840 --> 00:19:06.360 So they are usually a lot less important. 377 00:19:06.360 --> 00:19:09.510 And so if you want, you can just easily test these 378 00:19:09.510 --> 00:19:11.640 or implement them yourself. 379 00:19:11.640 --> 00:19:14.760 The only thing you need to know is that static fields 380 00:19:14.760 --> 00:19:19.470 and also static methods are not accessible on the instance, 381 00:19:19.470 --> 00:19:22.560 so in this example on this account. 382 00:19:22.560 --> 00:19:25.560 So they're not inherited from the prototype here 383 00:19:25.560 --> 00:19:27.870 to the class instances. 384 00:19:27.870 --> 00:19:32.100 So instead, they're only accessible on the class itself. 385 00:19:32.100 --> 00:19:35.070 So just again, we just use the static 386 00:19:35.070 --> 00:19:37.810 and then let's call here a test method 387 00:19:38.820 --> 00:19:42.360 which will simply return true. 388 00:19:42.360 --> 00:19:47.360 And so, again, we use this on the account itself. 389 00:19:49.830 --> 00:19:54.300 So now we cannot see anything so let's just console.log. 390 00:19:54.300 --> 00:19:58.590 something here and there we go. 391 00:19:58.590 --> 00:19:59.970 So there is the test, 392 00:19:59.970 --> 00:20:03.840 and, yeah, we use this directly on the account class, 393 00:20:03.840 --> 00:20:08.280 not on the account object that we created through the class. 394 00:20:08.280 --> 00:20:13.200 And if we made this private, then of course, yeah, 395 00:20:13.200 --> 00:20:16.440 we get exactly the same error as before, 396 00:20:16.440 --> 00:20:19.920 but we could then use this here on the inside. 397 00:20:19.920 --> 00:20:23.370 So again, not really that important, I think. 398 00:20:23.370 --> 00:20:24.203 And so yeah, 399 00:20:24.203 --> 00:20:28.770 I'm just not spending a lot of time on this here. 400 00:20:28.770 --> 00:20:29.640 All right. 401 00:20:29.640 --> 00:20:31.590 And with this, I basically showed you 402 00:20:31.590 --> 00:20:35.640 all there is to know about object oriented programming. 403 00:20:35.640 --> 00:20:38.460 There's just one small quality of life, 404 00:20:38.460 --> 00:20:40.890 but also very common improvement 405 00:20:40.890 --> 00:20:43.800 that we can make to these methods. 406 00:20:43.800 --> 00:20:46.803 And so let me show you that in the next lecture.