1 00:00:01,290 --> 00:00:03,810 Alright, so let's now implement 2 00:00:03,810 --> 00:00:07,233 truly private class fields and methods. 3 00:00:08,660 --> 00:00:11,220 So private class fields and methods 4 00:00:11,220 --> 00:00:14,220 are actually part of a bigger proposal 5 00:00:14,220 --> 00:00:17,580 for improving and changing JavaScript classes 6 00:00:17,580 --> 00:00:20,580 which is simply called Class fields. 7 00:00:20,580 --> 00:00:25,000 Now this Class fields proposal is currently at stage three. 8 00:00:25,000 --> 00:00:28,110 And so right now it's actually not yet part 9 00:00:28,110 --> 00:00:30,240 of the JavaScript language. 10 00:00:30,240 --> 00:00:32,470 However, being at stage three 11 00:00:32,470 --> 00:00:35,200 means that it's very likely that at some point, 12 00:00:35,200 --> 00:00:38,240 it will move forward to stage number four. 13 00:00:38,240 --> 00:00:40,840 And then it will actually become a part 14 00:00:40,840 --> 00:00:42,900 of the JavaScript language. 15 00:00:42,900 --> 00:00:44,580 And that's probably gonna happen 16 00:00:44,580 --> 00:00:46,870 some point soon in the future. 17 00:00:46,870 --> 00:00:49,280 And that's why I decided to already include 18 00:00:49,280 --> 00:00:52,190 class fields in this course. 19 00:00:52,190 --> 00:00:55,090 And in fact, some parts of this proposal 20 00:00:55,090 --> 00:00:58,000 actually already work in Google Chrome, 21 00:00:58,000 --> 00:00:59,750 but other parts don't. 22 00:00:59,750 --> 00:01:02,403 At least not at the time of recording this video. 23 00:01:03,300 --> 00:01:06,520 Now for starters, why is this proposal 24 00:01:06,520 --> 00:01:09,180 actually called Class fields? 25 00:01:09,180 --> 00:01:14,180 Well, in traditional OOP languages like Java and C++, 26 00:01:14,430 --> 00:01:17,810 properties are usually called fields. 27 00:01:17,810 --> 00:01:21,690 So what this means is that with this new proposal, 28 00:01:21,690 --> 00:01:25,450 JavaScript is moving away from the idea that classes 29 00:01:25,450 --> 00:01:29,400 are just syntactic sugar over constructor functions. 30 00:01:29,400 --> 00:01:32,320 Because with this new class features classes 31 00:01:32,320 --> 00:01:34,700 actually start to have abilities 32 00:01:34,700 --> 00:01:38,890 that we didn't previously have with constructor functions. 33 00:01:38,890 --> 00:01:42,740 Now to many developers consider this to be a big problem 34 00:01:42,740 --> 00:01:46,230 but personally, I'm not sure if it is such a big deal 35 00:01:46,230 --> 00:01:49,240 for the average JavaScript developer. 36 00:01:49,240 --> 00:01:51,720 So as long as you still understand 37 00:01:51,720 --> 00:01:55,850 how prototypal inheritance and function constructors work 38 00:01:55,850 --> 00:01:58,750 then I believe that you will be fine. 39 00:01:58,750 --> 00:02:01,480 But anyway, no matter if you end up using 40 00:02:01,480 --> 00:02:05,193 these new class features, let's now start exploring them. 41 00:02:06,120 --> 00:02:10,520 So in this proposal, there are actually four different kinds 42 00:02:10,520 --> 00:02:14,880 of fields and methods, and actually it's even eight. 43 00:02:14,880 --> 00:02:18,520 But in this video, I'm just gonna focus on these four. 44 00:02:18,520 --> 00:02:23,520 And that's public fields, that is private fields. 45 00:02:25,650 --> 00:02:28,150 And then we have public methods 46 00:02:29,130 --> 00:02:33,090 and we have private methods. 47 00:02:33,090 --> 00:02:35,150 So essentially there is a public 48 00:02:35,150 --> 00:02:39,890 and a private version of both fields and methods. 49 00:02:39,890 --> 00:02:42,593 And let's now start with public fields. 50 00:02:43,430 --> 00:02:46,630 So we can think of a field as a property 51 00:02:46,630 --> 00:02:49,260 that will be on all instances. 52 00:02:49,260 --> 00:02:54,260 So that's why we can also call this a public instance field. 53 00:02:54,320 --> 00:02:56,580 So basically in our example here, 54 00:02:56,580 --> 00:03:00,510 the two fields could be the movements and the locale. 55 00:03:00,510 --> 00:03:03,400 Because these are basically two properties 56 00:03:03,400 --> 00:03:05,360 that are gonna be on all the objects 57 00:03:05,360 --> 00:03:08,110 that we create with this class. 58 00:03:08,110 --> 00:03:11,830 Because we do not pass any of the values here in, 59 00:03:11,830 --> 00:03:13,850 so into the constructor. 60 00:03:13,850 --> 00:03:16,260 And so this array and this language 61 00:03:16,260 --> 00:03:20,550 they will always be set for all the instances right? 62 00:03:20,550 --> 00:03:23,793 And so let's now add them as public fields. 63 00:03:25,230 --> 00:03:27,623 So that works simply like this. 64 00:03:28,470 --> 00:03:33,343 We can say locale equal and then navigator.language. 65 00:03:35,260 --> 00:03:38,850 And then here, we actually need to write a semi colon 66 00:03:38,850 --> 00:03:42,630 which is kind of weird because between these methods 67 00:03:42,630 --> 00:03:46,020 we do not need commas or semi-colons. 68 00:03:46,020 --> 00:03:48,480 What's also weird is that this kind of 69 00:03:48,480 --> 00:03:52,060 looks like a variable here right? 70 00:03:52,060 --> 00:03:56,950 But we don't have to declare it using like const or let, 71 00:03:56,950 --> 00:04:01,530 so this is how we simply define a public field. 72 00:04:01,530 --> 00:04:02,793 So let's write that here. 73 00:04:03,870 --> 00:04:05,093 So public fields. 74 00:04:06,100 --> 00:04:08,710 And the other one is gonna be this movements 75 00:04:12,220 --> 00:04:15,100 and I will still for now call it _movements. 76 00:04:17,830 --> 00:04:21,753 And so I'm setting it to this empty array now. 77 00:04:21,753 --> 00:04:24,940 And so when we reload this, now you will see 78 00:04:24,940 --> 00:04:28,190 the attendee account here worked exactly the same. 79 00:04:28,190 --> 00:04:32,500 So we still have the locale here and also the movements 80 00:04:32,500 --> 00:04:35,280 but now they are actually public fields, 81 00:04:35,280 --> 00:04:37,150 but in our final object here, 82 00:04:37,150 --> 00:04:39,080 that doesn't make any difference. 83 00:04:39,080 --> 00:04:42,250 Because again, these public fields here 84 00:04:42,250 --> 00:04:45,003 are gonna be present on all the instances 85 00:04:45,003 --> 00:04:47,690 that we are creating through the class. 86 00:04:47,690 --> 00:04:50,040 So they are not on the prototype. 87 00:04:50,040 --> 00:04:52,920 So this is important to understand. 88 00:04:52,920 --> 00:04:55,320 So all these methods that we add here 89 00:04:55,320 --> 00:04:59,030 they will always be added to the prototype, right? 90 00:04:59,030 --> 00:05:02,993 But again the fields here, they are on the instances. 91 00:05:04,110 --> 00:05:05,660 Let me write that here as well. 92 00:05:08,940 --> 00:05:11,320 And so again having this here, 93 00:05:11,320 --> 00:05:14,970 is essentially exactly the same as this. 94 00:05:14,970 --> 00:05:17,343 And therefore these public fields 95 00:05:17,343 --> 00:05:21,120 they're also referenceable by the this keyboard 96 00:05:21,120 --> 00:05:25,630 and they are also referenceable via the this keyword. 97 00:05:25,630 --> 00:05:28,620 Great, so that's public fields. 98 00:05:28,620 --> 00:05:33,433 Next up, let's talk about private fields. 99 00:05:35,400 --> 00:05:36,880 So this is number two. 100 00:05:36,880 --> 00:05:38,053 This is number one. 101 00:05:39,470 --> 00:05:41,590 Let's add that here as well. 102 00:05:41,590 --> 00:05:44,680 So just to keep a nice overview of all the things 103 00:05:44,680 --> 00:05:47,113 that we are learning here in this lecture. 104 00:05:49,330 --> 00:05:50,210 Alright. 105 00:05:50,210 --> 00:05:51,833 So private fields is the one 106 00:05:51,833 --> 00:05:54,540 that we have actually been waiting for. 107 00:05:54,540 --> 00:05:57,180 So with private fields we can now make it 108 00:05:57,180 --> 00:06:00,660 so that properties are really truly 109 00:06:00,660 --> 00:06:03,630 not accessible from the outside. 110 00:06:03,630 --> 00:06:06,580 So just like in the last lecture, let's start 111 00:06:06,580 --> 00:06:10,093 by now finally making the movements array private. 112 00:06:11,110 --> 00:06:12,280 So let's move it here. 113 00:06:12,280 --> 00:06:16,090 And now I will remove the underscore 114 00:06:16,090 --> 00:06:19,180 and then I will use the # symbol. 115 00:06:19,180 --> 00:06:23,430 And so this is the syntax that makes a field private 116 00:06:23,430 --> 00:06:26,040 in this new class proposal. 117 00:06:26,040 --> 00:06:30,070 So let's try and reload to see what happens now. 118 00:06:30,070 --> 00:06:32,410 And indeed we get some error. 119 00:06:32,410 --> 00:06:35,220 And the reason for that is that the property 120 00:06:35,220 --> 00:06:38,143 is now really called #movements. 121 00:06:39,070 --> 00:06:42,600 So we need to change that everywhere. 122 00:06:42,600 --> 00:06:44,713 So both here and here. 123 00:06:46,770 --> 00:06:47,713 Now, that's it. 124 00:06:49,290 --> 00:06:52,103 Give it a safe and now it all works. 125 00:06:52,980 --> 00:06:56,980 So let's see here we now actually have 126 00:06:56,980 --> 00:06:59,160 the movements in this array, 127 00:06:59,160 --> 00:07:04,020 which is called #movements now basically. 128 00:07:04,020 --> 00:07:08,960 And so now, we are finally gonna be able to see 129 00:07:08,960 --> 00:07:12,240 that this property is indeed protected. 130 00:07:12,240 --> 00:07:17,123 So if we try to read account1.movements 131 00:07:19,550 --> 00:07:23,540 then we get a syntax error. 132 00:07:23,540 --> 00:07:26,100 So private field movements must be declared 133 00:07:26,100 --> 00:07:28,270 in an enclosing class. 134 00:07:28,270 --> 00:07:31,750 So basically JavaScript things that I'm trying to implement 135 00:07:31,750 --> 00:07:34,640 this private class field out here. 136 00:07:34,640 --> 00:07:36,930 And that's the reason for this error. 137 00:07:36,930 --> 00:07:39,130 But what matters is that, in fact, 138 00:07:39,130 --> 00:07:42,250 we cannot access this variable outside here. 139 00:07:42,250 --> 00:07:44,170 And of course the movement property 140 00:07:44,170 --> 00:07:47,400 from before, does not, no longer exist. 141 00:07:47,400 --> 00:07:49,103 So we get undefined error. 142 00:07:50,100 --> 00:07:53,810 Now the error message here might look different for you 143 00:07:53,810 --> 00:07:56,320 by the time that you're watching this video. 144 00:07:56,320 --> 00:07:59,910 Because as I said, this proposal at the time of recording 145 00:07:59,910 --> 00:08:01,910 is not really finished yet. 146 00:08:01,910 --> 00:08:05,400 And so some implementation details might still change. 147 00:08:05,400 --> 00:08:08,543 And so that might also affect the error message here. 148 00:08:10,470 --> 00:08:13,630 And speaking of implementation, I believe 149 00:08:13,630 --> 00:08:17,160 that right now only Google Chrome actually supports 150 00:08:17,160 --> 00:08:19,060 these private class fields. 151 00:08:19,060 --> 00:08:23,130 And so make sure to also test your code in Google Chrome. 152 00:08:23,130 --> 00:08:26,220 But anyway, the movements are now truly private 153 00:08:26,220 --> 00:08:28,750 and no longer accessible outside here. 154 00:08:28,750 --> 00:08:31,270 At least not by their property. 155 00:08:31,270 --> 00:08:33,033 We do still have of course, 156 00:08:34,010 --> 00:08:36,950 this method here in our public API. 157 00:08:36,950 --> 00:08:40,680 And so this one we can still use to get the movement. 158 00:08:40,680 --> 00:08:41,963 So that's right here. 159 00:08:42,870 --> 00:08:46,690 And that was indeed the whole point of creating this method 160 00:08:46,690 --> 00:08:49,543 in the first place, in the last lecture. 161 00:08:50,850 --> 00:08:55,053 Now the next candidate to make private is this pin. 162 00:08:55,900 --> 00:08:58,380 So in the last lecture we protected it 163 00:08:58,380 --> 00:09:01,560 but now just like the movements, we want to convert it 164 00:09:01,560 --> 00:09:04,090 to a truly private field. 165 00:09:04,090 --> 00:09:07,560 However, this time the situation is a bit different. 166 00:09:07,560 --> 00:09:10,200 Because now we are actually setting the pin 167 00:09:10,200 --> 00:09:13,930 based on this input value to the constructor. 168 00:09:13,930 --> 00:09:18,270 However, we can not define a field in the constructor. 169 00:09:18,270 --> 00:09:21,040 So the fields, they really have to be out here 170 00:09:22,320 --> 00:09:24,290 outside of any method. 171 00:09:24,290 --> 00:09:28,540 So what we have to do is to create the field out here. 172 00:09:28,540 --> 00:09:31,520 So the private field again with hash, 173 00:09:31,520 --> 00:09:34,080 and then don't set it to anything. 174 00:09:34,080 --> 00:09:36,040 And so this is essentially just 175 00:09:36,040 --> 00:09:38,320 like creating an empty variable. 176 00:09:38,320 --> 00:09:41,510 So in the beginning, this will be set to undefined 177 00:09:41,510 --> 00:09:45,960 and then here we can redefine that value basically. 178 00:09:45,960 --> 00:09:48,070 And so one more time we can see 179 00:09:48,070 --> 00:09:50,320 that these class fields are really just 180 00:09:50,320 --> 00:09:52,310 like any other property. 181 00:09:52,310 --> 00:09:54,210 That's why later down here 182 00:09:54,210 --> 00:09:57,370 we can then access it on the this keyword 183 00:09:57,370 --> 00:10:00,840 and set it to the value that we received. 184 00:10:00,840 --> 00:10:01,913 So let's try that. 185 00:10:03,160 --> 00:10:07,890 And indeed the pin here is now also a protected field 186 00:10:07,890 --> 00:10:10,950 or actually a private field. 187 00:10:10,950 --> 00:10:13,170 And so when we try to access it, 188 00:10:13,170 --> 00:10:15,313 we will no longer be able to do that. 189 00:10:19,420 --> 00:10:20,253 Alright. 190 00:10:21,320 --> 00:10:25,500 So that is truly private class fields. 191 00:10:25,500 --> 00:10:28,100 And again these are gonna be available 192 00:10:28,100 --> 00:10:30,143 on the instances themselves. 193 00:10:32,100 --> 00:10:34,580 So not on the prototype. 194 00:10:34,580 --> 00:10:37,780 And so, yeah, of course that's why we have them 195 00:10:37,780 --> 00:10:40,490 right here in the instance. 196 00:10:40,490 --> 00:10:42,600 Now, some people don't like the way 197 00:10:42,600 --> 00:10:46,440 that the Syntax looks here with the # symbol 198 00:10:46,440 --> 00:10:49,700 and there has been a lot of discussion going on. 199 00:10:49,700 --> 00:10:51,630 Now, I don't mind it at all. 200 00:10:51,630 --> 00:10:53,920 I just like to focus on the benefits 201 00:10:53,920 --> 00:10:56,150 that this new syntax gives us. 202 00:10:56,150 --> 00:10:59,030 There is a slight change that it might still change 203 00:10:59,030 --> 00:11:02,350 before the proposal reaches stage four, 204 00:11:02,350 --> 00:11:04,760 but in this case, I will simply go ahead 205 00:11:04,760 --> 00:11:06,910 and update it as video. 206 00:11:06,910 --> 00:11:10,183 But anyway, next up we have public methods. 207 00:11:11,040 --> 00:11:15,120 And actually that is nothing new at this point. 208 00:11:15,120 --> 00:11:18,670 So all these methods here that we have been using 209 00:11:18,670 --> 00:11:20,823 are indeed public methods. 210 00:11:21,750 --> 00:11:25,720 So in this case, there is not a lot to talk about. 211 00:11:25,720 --> 00:11:29,510 And in fact, we had already written something similar here. 212 00:11:29,510 --> 00:11:32,230 So saying that all of these methods together 213 00:11:32,230 --> 00:11:36,290 are basically the public interface of our class. 214 00:11:36,290 --> 00:11:40,020 And so therefore let's move on to our final point here, 215 00:11:40,020 --> 00:11:41,893 which is private methods. 216 00:11:45,150 --> 00:11:46,943 So let's do that down here. 217 00:11:48,190 --> 00:11:52,150 And private methods, as we already mentioned earlier 218 00:11:52,150 --> 00:11:55,450 are very useful to hide the implementation details 219 00:11:55,450 --> 00:11:57,100 from the outside. 220 00:11:57,100 --> 00:11:58,890 And that's why in the previous lecture, 221 00:11:58,890 --> 00:12:00,780 we already made this method 222 00:12:00,780 --> 00:12:04,110 and protect it with this underscore. 223 00:12:04,110 --> 00:12:07,780 And so let's no grab this and put it down here 224 00:12:08,850 --> 00:12:11,050 and now to make a private method, 225 00:12:11,050 --> 00:12:15,460 the syntax is exactly the same as private fields. 226 00:12:15,460 --> 00:12:17,920 So just like with the hash. 227 00:12:17,920 --> 00:12:20,890 Now, the big problem here, is that right now 228 00:12:20,890 --> 00:12:23,900 no browser actually supports this. 229 00:12:23,900 --> 00:12:27,010 So I can just show you how it works in the code 230 00:12:27,010 --> 00:12:30,780 but unfortunately I cannot show you how it works. 231 00:12:30,780 --> 00:12:34,153 So if I save this now I'll probably get some error. 232 00:12:35,030 --> 00:12:36,920 And so, yeah, the first one is 233 00:12:36,920 --> 00:12:39,403 that this function now no longer exists. 234 00:12:40,490 --> 00:12:42,433 So let's change that here as well. 235 00:12:44,920 --> 00:12:49,490 And well, we don't get any error actually. 236 00:12:49,490 --> 00:12:53,203 So that's surprising to me, let's see what we have here. 237 00:12:54,410 --> 00:12:58,693 So indeed here we have the approve loan now. 238 00:12:59,630 --> 00:13:02,470 So I guess that right now Google Chrome 239 00:13:02,470 --> 00:13:06,360 simply made this method like a private field. 240 00:13:06,360 --> 00:13:11,350 So that's why it no longer appears in the prototype, right? 241 00:13:11,350 --> 00:13:16,350 So it's not here, but now it's, instead on the instance. 242 00:13:17,080 --> 00:13:19,710 So that's not really what we want. 243 00:13:19,710 --> 00:13:22,423 Let's just test if we can access it out here. 244 00:13:26,900 --> 00:13:30,210 So console.logacc1.approvedLoan with some value. 245 00:13:36,610 --> 00:13:39,210 And then we get the same error as before. 246 00:13:39,210 --> 00:13:41,960 So private fields approve loan. 247 00:13:41,960 --> 00:13:44,670 And so, yeah, it's just as I said, 248 00:13:44,670 --> 00:13:48,050 so Google Chrome right now basically sees this 249 00:13:48,050 --> 00:13:51,740 as a private class field and not as a method. 250 00:13:51,740 --> 00:13:53,130 And so that's why I was saying 251 00:13:53,130 --> 00:13:56,250 that the methods are not really yet implemented 252 00:13:56,250 --> 00:13:57,580 in Google Chrome. 253 00:13:57,580 --> 00:14:00,440 So private methods are not available. 254 00:14:00,440 --> 00:14:03,480 And so let me just leave it here as a comment, 255 00:14:03,480 --> 00:14:06,400 but I will go back to simply protect it 256 00:14:06,400 --> 00:14:08,143 with the underscore convention. 257 00:14:09,490 --> 00:14:10,570 Alright. 258 00:14:10,570 --> 00:14:13,750 So at some point in the future, this will work 259 00:14:16,060 --> 00:14:19,193 but for now, let's leave it just as it was before. 260 00:14:20,240 --> 00:14:25,240 Okay, so we talked about these four features here. 261 00:14:25,240 --> 00:14:27,960 So public fields, private fields, 262 00:14:27,960 --> 00:14:31,200 public methods, and private methods. 263 00:14:31,200 --> 00:14:32,890 Now, besides these four 264 00:14:32,890 --> 00:14:36,650 there's also the static version of the same form. 265 00:14:36,650 --> 00:14:38,490 And that's why I said in the beginning 266 00:14:38,490 --> 00:14:41,730 that actually we have eight new features. 267 00:14:41,730 --> 00:14:44,583 So there's also the private version. 268 00:14:48,490 --> 00:14:51,010 And actually, and that's not private. 269 00:14:51,010 --> 00:14:54,113 That is static, alright. 270 00:14:55,050 --> 00:14:57,440 And actually we already used the 271 00:14:57,440 --> 00:15:00,250 static public method before. 272 00:15:00,250 --> 00:15:02,690 And so that worked by simply adding 273 00:15:03,680 --> 00:15:06,250 the static keyword in front of it. 274 00:15:06,250 --> 00:15:11,040 Remember, so just static and then some method name. 275 00:15:11,040 --> 00:15:14,453 And so usually we use this for helper functions. 276 00:15:17,300 --> 00:15:21,010 Because these static methods will not be available 277 00:15:21,010 --> 00:15:24,950 on all the instances, but only on the class itself. 278 00:15:24,950 --> 00:15:25,783 Remember, 279 00:15:28,120 --> 00:15:30,550 so the static one here 280 00:15:30,550 --> 00:15:33,130 only works like this. 281 00:15:33,130 --> 00:15:35,113 So account.helper. 282 00:15:37,150 --> 00:15:40,840 And so, as I said, there is also a static version 283 00:15:40,840 --> 00:15:42,703 for all the other three ones. 284 00:15:43,780 --> 00:15:46,610 But I'm not gonna show them to you now in this video 285 00:15:46,610 --> 00:15:49,100 because they are really less important, 286 00:15:49,100 --> 00:15:50,620 and if you want you can, 287 00:15:50,620 --> 00:15:53,860 of course easily test them out by yourself. 288 00:15:53,860 --> 00:15:54,693 Now, okay. 289 00:15:54,693 --> 00:15:56,860 And that's actually it. 290 00:15:56,860 --> 00:15:59,570 So this is how we implement encapsulation 291 00:15:59,570 --> 00:16:03,910 and data privacy using the new class fields proposal 292 00:16:03,910 --> 00:16:07,260 that hopefully at some point will really become part 293 00:16:07,260 --> 00:16:08,763 of the JavaScript language.