WEBVTT 1 00:00:01.440 --> 00:00:03.730 There are a few more things that we need 2 00:00:03.730 --> 00:00:05.700 to learn about classes. 3 00:00:05.700 --> 00:00:08.943 And so, let's actually create a new class now. 4 00:00:10.850 --> 00:00:12.320 And as an example, 5 00:00:12.320 --> 00:00:14.123 we are gonna use the bank account 6 00:00:14.123 --> 00:00:17.780 that we implemented before, in the Bankist app. 7 00:00:17.780 --> 00:00:19.460 Remember that? 8 00:00:19.460 --> 00:00:24.450 So, let's say class Account, and then as always, 9 00:00:26.770 --> 00:00:29.500 we need the constructor method. 10 00:00:29.500 --> 00:00:33.023 And here each account should have the owner name. 11 00:00:34.490 --> 00:00:37.840 It should have a defined currency, 12 00:00:37.840 --> 00:00:40.733 and also, we want to pass in a pin. 13 00:00:42.930 --> 00:00:46.740 And so, let's say this.owner is owner 14 00:00:47.640 --> 00:00:50.343 and the same for currency and the pin. 15 00:00:53.360 --> 00:00:58.360 So, we already know how to do all of this, right? 16 00:00:58.668 --> 00:01:01.423 And so now let's create a new account here. 17 00:01:02.440 --> 00:01:07.440 Let's say acc1, and so new account, 18 00:01:07.760 --> 00:01:09.430 and let's say that I am the owner. 19 00:01:09.430 --> 00:01:14.430 So, Jonas, then the currency is in Euro and the pin, 20 00:01:15.130 --> 00:01:16.563 let's say, is this one? 21 00:01:19.890 --> 00:01:21.290 All right. 22 00:01:21.290 --> 00:01:24.710 So, indeed we have the three values that we passed 23 00:01:24.710 --> 00:01:29.020 into the constructor, now inside of the object. 24 00:01:29.020 --> 00:01:31.570 But now what about the movements array, 25 00:01:31.570 --> 00:01:34.350 and maybe also the local. 26 00:01:34.350 --> 00:01:37.100 So, we want to start always with an empty array 27 00:01:37.100 --> 00:01:39.230 as the movements and the local, 28 00:01:39.230 --> 00:01:43.090 we want to get from the navigator.language. 29 00:01:43.090 --> 00:01:45.280 So, how should we do that? 30 00:01:45.280 --> 00:01:48.013 Should we add a new parameter, like this? 31 00:01:48.930 --> 00:01:53.740 So, movement, and then always pass in an empty array 32 00:01:53.740 --> 00:01:55.523 in all the accounts that we create. 33 00:01:56.500 --> 00:01:59.110 Well, that would work. 34 00:01:59.110 --> 00:02:01.420 So, let's actually see that. 35 00:02:01.420 --> 00:02:06.070 So, movement, actually movements should be equal 36 00:02:06.070 --> 00:02:08.830 to movements, here as well. 37 00:02:08.830 --> 00:02:10.950 And so now, as you see, 38 00:02:10.950 --> 00:02:13.790 the movement is now this empty array, 39 00:02:13.790 --> 00:02:15.750 however, it doesn't make much sense 40 00:02:15.750 --> 00:02:18.110 to pass in this empty array, 41 00:02:18.110 --> 00:02:22.260 into all the new accounts that we want to create, right? 42 00:02:22.260 --> 00:02:26.883 So, we don't need this, and instead we can simply do this. 43 00:02:28.300 --> 00:02:31.520 And so, this is something that we didn't do before, 44 00:02:31.520 --> 00:02:34.320 but of course we can create even more properties 45 00:02:34.320 --> 00:02:36.950 on any instance and properties 46 00:02:36.950 --> 00:02:39.790 that are not based on any inputs. 47 00:02:39.790 --> 00:02:43.430 And the same we can now do for the local 48 00:02:43.430 --> 00:02:48.430 and set it to navigator.language, right? 49 00:02:50.430 --> 00:02:53.193 And so now, all of that appears here as well. 50 00:02:55.370 --> 00:02:58.390 And in fact, we can even execute any code 51 00:02:58.390 --> 00:03:00.603 here in this constructor that we want. 52 00:03:02.510 --> 00:03:07.510 So, let's say, "Thanks for opening an account," 53 00:03:13.256 --> 00:03:15.140 and then owner. 54 00:03:15.140 --> 00:03:18.370 And so, when Jonas opens a new account, 55 00:03:18.370 --> 00:03:21.880 then he's basically greeted with this message here, 56 00:03:21.880 --> 00:03:24.620 coming right from the constructor. 57 00:03:24.620 --> 00:03:29.620 All right, but now what about the deposits and withdrawals? 58 00:03:30.060 --> 00:03:33.230 So, basically what about our movements? 59 00:03:33.230 --> 00:03:38.090 Well, we could simply now go ahead and do this. 60 00:03:38.090 --> 00:03:41.060 So we can take acc1.movements, 61 00:03:41.060 --> 00:03:43.710 and then if we wanted to do a deposit, 62 00:03:43.710 --> 00:03:46.200 we could push a value into this. 63 00:03:46.200 --> 00:03:51.200 Let's say 250, and then when we want to withdraw something, 64 00:03:52.110 --> 00:03:54.443 we would simply push a negative value. 65 00:03:55.330 --> 00:03:59.760 And so, if we then take a look at our account here, 66 00:03:59.760 --> 00:04:03.550 then of course we would see these movements right here 67 00:04:03.550 --> 00:04:04.930 in our array. 68 00:04:04.930 --> 00:04:09.070 However, it's not a good idea at all to do this. 69 00:04:09.070 --> 00:04:13.350 So, instead of interacting with a property like this, 70 00:04:13.350 --> 00:04:15.860 it's a lot better to create methods 71 00:04:15.860 --> 00:04:18.540 that interact with these properties. 72 00:04:18.540 --> 00:04:22.260 And that is especially true for important properties, 73 00:04:22.260 --> 00:04:25.020 such as these movements here. 74 00:04:25.020 --> 00:04:27.440 So, this will for sure avoid bugs 75 00:04:27.440 --> 00:04:30.400 in the future, as your application grows. 76 00:04:30.400 --> 00:04:33.420 So, let's now actually create a deposit 77 00:04:33.420 --> 00:04:35.563 and a withdrawal method here. 78 00:04:37.440 --> 00:04:42.253 So, deposit and inherit the value that we want to deposit. 79 00:04:43.790 --> 00:04:47.503 And then this.movements.push, 80 00:04:48.519 --> 00:04:50.093 the value that we pass into. 81 00:04:53.130 --> 00:04:55.203 And now the same for withdrawal. 82 00:04:58.370 --> 00:04:59.963 So, also a value. 83 00:05:00.920 --> 00:05:05.920 And so here, we can now actually call this method 84 00:05:05.990 --> 00:05:09.910 because it's actually gonna work basically the same way. 85 00:05:09.910 --> 00:05:12.630 So this.deposit. 86 00:05:12.630 --> 00:05:14.080 And so, as you can see here, 87 00:05:14.080 --> 00:05:16.660 we can actually call other methods 88 00:05:16.660 --> 00:05:18.730 inside of a certain method. 89 00:05:18.730 --> 00:05:22.340 So, in withdraw, we are calling this.deposit, 90 00:05:22.340 --> 00:05:25.270 but of course we still need to use the this keyword 91 00:05:25.270 --> 00:05:27.793 to be able to access this other method. 92 00:05:29.370 --> 00:05:32.820 And then here, we pass in minus the value 93 00:05:32.820 --> 00:05:34.733 that we received in this function. 94 00:05:36.220 --> 00:05:38.430 So let's try this now. 95 00:05:38.430 --> 00:05:39.973 So instead of doing this, 96 00:05:41.160 --> 00:05:43.970 we now can do it in a much nicer way. 97 00:05:43.970 --> 00:05:48.970 So acc1.deposit 250, and then acc1.withdraw 140. 98 00:05:57.160 --> 00:05:58.400 And so indeed, 99 00:05:58.400 --> 00:06:02.670 our movements array looks just the same as before, 100 00:06:02.670 --> 00:06:06.440 but now we are actually using this public interface 101 00:06:06.440 --> 00:06:09.570 that we built here, right? 102 00:06:09.570 --> 00:06:11.760 So, basically these methods here, 103 00:06:11.760 --> 00:06:14.560 are the interface to our objects, 104 00:06:14.560 --> 00:06:17.970 and we also call this API, remember? 105 00:06:17.970 --> 00:06:19.330 So, we talked about this, 106 00:06:19.330 --> 00:06:21.483 right at the beginning of the section. 107 00:06:22.740 --> 00:06:25.320 So again, let's actually write this here. 108 00:06:25.320 --> 00:06:29.750 So this is the public interface of our objects. 109 00:06:29.750 --> 00:06:32.660 And so, yeah, this is a lot better 110 00:06:32.660 --> 00:06:34.860 than having to manually manipulate 111 00:06:34.860 --> 00:06:39.860 these properties outside of the object, as we did here. 112 00:06:39.970 --> 00:06:44.750 Also this withdraw method here actually abstracts the fact 113 00:06:44.750 --> 00:06:48.880 that a withdrawal is basically a negative movement. 114 00:06:48.880 --> 00:06:50.980 So here as we did it manually, 115 00:06:50.980 --> 00:06:54.320 we needed to pass in minus 140. 116 00:06:54.320 --> 00:06:57.320 But now, as we do a withdrawal, it's of course, 117 00:06:57.320 --> 00:06:59.250 a lot more natural to write 118 00:06:59.250 --> 00:07:03.670 that simply 140 are gonna be withdrawn. 119 00:07:03.670 --> 00:07:06.890 So, what I'm trying to say is that this minus here, 120 00:07:06.890 --> 00:07:09.340 is something that the user of this object, 121 00:07:09.340 --> 00:07:11.070 shouldn't be caring about. 122 00:07:11.070 --> 00:07:14.220 And so now, we actually abstracted that away, 123 00:07:14.220 --> 00:07:16.590 right into this object, 124 00:07:16.590 --> 00:07:19.693 and in particular into this withdrawal method. 125 00:07:20.870 --> 00:07:24.080 So, just a very small obstruction here in this case, 126 00:07:24.080 --> 00:07:26.223 but it's still worth to notice. 127 00:07:27.150 --> 00:07:31.010 All right, now, of course, 128 00:07:31.010 --> 00:07:34.590 still there is nothing stopping someone on our team 129 00:07:34.590 --> 00:07:37.900 from interacting with the movements array directly 130 00:07:37.900 --> 00:07:42.250 and potentially making mistakes and introducing bugs. 131 00:07:42.250 --> 00:07:45.160 So, simply the fact that we have these methods, 132 00:07:45.160 --> 00:07:49.000 doesn't make it impossible to still do this. 133 00:07:49.000 --> 00:07:51.653 And the same goes, for example, for the pin. 134 00:07:52.900 --> 00:07:55.570 So, of course, we can access the pin 135 00:07:55.570 --> 00:07:57.713 from outside of the account. 136 00:07:59.400 --> 00:08:03.630 So, you see, but probably it shouldn't be accessible 137 00:08:03.630 --> 00:08:07.780 from outside of the class, but yeah, 138 00:08:07.780 --> 00:08:10.670 of course, right now it is accessible. 139 00:08:10.670 --> 00:08:14.990 And this is actually a very real and very important concern. 140 00:08:14.990 --> 00:08:17.260 So, it's not just something theoretical 141 00:08:17.260 --> 00:08:19.240 that I'm telling you here. 142 00:08:19.240 --> 00:08:21.853 And the same, of course, goes for methods. 143 00:08:23.940 --> 00:08:28.223 So, let's say we have a requestLoan method here, 144 00:08:31.450 --> 00:08:33.100 for some value. 145 00:08:33.100 --> 00:08:35.980 And remember that this was also a functionality 146 00:08:35.980 --> 00:08:39.150 of the Bankist application. 147 00:08:39.150 --> 00:08:42.070 So, we could make the approval of the loan based 148 00:08:42.070 --> 00:08:46.610 on some condition, and that condition could come 149 00:08:46.610 --> 00:08:50.095 from some other method, let's say, 150 00:08:50.095 --> 00:08:54.095 approveLoan, let's pass in a value here as well, 151 00:08:57.570 --> 00:09:01.590 and this one will simply always return true. 152 00:09:01.590 --> 00:09:05.440 So, I don't want to implement any complex logic here now, 153 00:09:05.440 --> 00:09:08.710 but anyway, here we can now call this.approveLoan 154 00:09:11.010 --> 00:09:12.113 with the value. 155 00:09:13.010 --> 00:09:14.890 And so if the loan is approved, 156 00:09:14.890 --> 00:09:19.890 then this.deposit of the value, 157 00:09:21.210 --> 00:09:24.420 and we can lock something to the console. 158 00:09:24.420 --> 00:09:29.420 So, "Loan approved" or something like that, okay? 159 00:09:29.800 --> 00:09:32.340 Now, in the public interface, 160 00:09:32.340 --> 00:09:34.793 we basically only want this method here. 161 00:09:35.670 --> 00:09:39.928 So, we want to be able to do this here basically, 162 00:09:39.928 --> 00:09:44.928 acc1.requestLoan, let's say of 1000. 163 00:09:46.960 --> 00:09:49.490 And so, we see that the loan was approved 164 00:09:49.490 --> 00:09:52.220 and it was pushed into our array. 165 00:09:52.220 --> 00:09:56.420 But, of course, we are also able to do this. 166 00:09:56.420 --> 00:09:57.753 So approveLoan. 167 00:10:00.250 --> 00:10:03.100 And so this, of course, doesn't do anything, 168 00:10:03.100 --> 00:10:04.210 but in the real world, 169 00:10:04.210 --> 00:10:07.773 we should not even be allowed to access this kind of method. 170 00:10:08.770 --> 00:10:10.910 So this is kind of an internal method 171 00:10:10.910 --> 00:10:14.910 that only the requestLoan method should be able to use. 172 00:10:14.910 --> 00:10:17.610 And so the reason why I'm telling you all this, 173 00:10:17.610 --> 00:10:19.750 is basically just to justify 174 00:10:19.750 --> 00:10:24.440 that we really need data encapsulation and data privacy. 175 00:10:24.440 --> 00:10:27.880 And we talked about these topics in the introductory lecture 176 00:10:27.880 --> 00:10:30.440 of the section, and so as always, 177 00:10:30.440 --> 00:10:32.880 you can go ahead and review that, 178 00:10:32.880 --> 00:10:34.960 but anyway, in the next video, 179 00:10:34.960 --> 00:10:38.150 we will finally start implementing data privacy 180 00:10:38.150 --> 00:10:40.180 and data encapsulation. 181 00:10:40.180 --> 00:10:42.163 So let's move on there right now.