Original subtitles

1 1

Alright, so let's now implement 2

2

truly private class fields and methods. 3

3

So private class fields and methods 4

4

are actually part of a bigger proposal 5

5

for improving and changing JavaScript classes 6

6

which is simply called Class fields. 7

7

Now this Class fields proposal is currently at stage three. 8

8

And so right now it's actually not yet part 9

9

of the JavaScript language. 10

10

However, being at stage three 11

11

means that it's very likely that at some point, 12

12

it will move forward to stage number four. 13

13

And then it will actually become a part 14

14

of the JavaScript language. 15

15

And that's probably gonna happen 16

16

some point soon in the future. 17

17

And that's why I decided to already include 18

18

class fields in this course. 19

19

And in fact, some parts of this proposal 20

20

actually already work in Google Chrome, 21

21

but other parts don't. 22

22

At least not at the time of recording this video. 23

23

Now for starters, why is this proposal 24

24

actually called Class fields? 25

25

Well, in traditional OOP languages like Java and C++, 26

26

properties are usually called fields. 27

27

So what this means is that with this new proposal, 28

28

JavaScript is moving away from the idea that classes 29

29

are just syntactic sugar over constructor functions. 30

30

Because with this new class features classes 31

31

actually start to have abilities 32

32

that we didn't previously have with constructor functions. 33

33

Now to many developers consider this to be a big problem 34

34

but personally, I'm not sure if it is such a big deal 35

35

for the average JavaScript developer. 36

36

So as long as you still understand 37

37

how prototypal inheritance and function constructors work 38

38

then I believe that you will be fine. 39

39

But anyway, no matter if you end up using 40

40

these new class features, let's now start exploring them. 41

41

So in this proposal, there are actually four different kinds 42

42

of fields and methods, and actually it's even eight. 43

43

But in this video, I'm just gonna focus on these four. 44

44

And that's public fields, that is private fields. 45

45

And then we have public methods 46

46

and we have private methods. 47

47

So essentially there is a public 48

48

and a private version of both fields and methods. 49

49

And let's now start with public fields. 50

50

So we can think of a field as a property 51

51

that will be on all instances. 52

52

So that's why we can also call this a public instance field. 53

53

So basically in our example here, 54

54

the two fields could be the movements and the locale. 55

55

Because these are basically two properties 56

56

that are gonna be on all the objects 57

57

that we create with this class. 58

58

Because we do not pass any of the values here in, 59

59

so into the constructor. 60

60

And so this array and this language 61

61

they will always be set for all the instances right? 62

62

And so let's now add them as public fields. 63

63

So that works simply like this. 64

64

We can say locale equal and then navigator.language. 65

65

And then here, we actually need to write a semi colon 66

66

which is kind of weird because between these methods 67

67

we do not need commas or semi-colons. 68

68

What's also weird is that this kind of 69

69

looks like a variable here right? 70

70

But we don't have to declare it using like const or let, 71

71

so this is how we simply define a public field. 72

72

So let's write that here. 73

73

So public fields. 74

74

And the other one is gonna be this movements 75

75

and I will still for now call it _movements. 76

76

And so I'm setting it to this empty array now. 77

77

And so when we reload this, now you will see 78

78

the attendee account here worked exactly the same. 79

79

So we still have the locale here and also the movements 80

80

but now they are actually public fields, 81

81

but in our final object here, 82

82

that doesn't make any difference. 83

83

Because again, these public fields here 84

84

are gonna be present on all the instances 85

85

that we are creating through the class. 86

86

So they are not on the prototype. 87

87

So this is important to understand. 88

88

So all these methods that we add here 89

89

they will always be added to the prototype, right? 90

90

But again the fields here, they are on the instances. 91

91

Let me write that here as well. 92

92

And so again having this here, 93

93

is essentially exactly the same as this. 94

94

And therefore these public fields 95

95

they're also referenceable by the this keyboard 96

96

and they are also referenceable via the this keyword. 97

97

Great, so that's public fields. 98

98

Next up, let's talk about private fields. 99

99

So this is number two. 100

100

This is number one. 101

101

Let's add that here as well. 102

102

So just to keep a nice overview of all the things 103

103

that we are learning here in this lecture. 104

104

Alright. 105

105

So private fields is the one 106

106

that we have actually been waiting for. 107

107

So with private fields we can now make it 108

108

so that properties are really truly 109

109

not accessible from the outside. 110

110

So just like in the last lecture, let's start 111

111

by now finally making the movements array private. 112

112

So let's move it here. 113

113

And now I will remove the underscore 114

114

and then I will use the # symbol. 115

115

And so this is the syntax that makes a field private 116

116

in this new class proposal. 117

117

So let's try and reload to see what happens now. 118

118

And indeed we get some error. 119

119

And the reason for that is that the property 120

120

is now really called #movements. 121

121

So we need to change that everywhere. 122

122

So both here and here. 123

123

Now, that's it. 124

124

Give it a safe and now it all works. 125

125

So let's see here we now actually have 126

126

the movements in this array, 127

127

which is called #movements now basically. 128

128

And so now, we are finally gonna be able to see 129

129

that this property is indeed protected. 130

130

So if we try to read account1.movements 131

131

then we get a syntax error. 132

132

So private field movements must be declared 133

133

in an enclosing class. 134

134

So basically JavaScript things that I'm trying to implement 135

135

this private class field out here. 136

136

And that's the reason for this error. 137

137

But what matters is that, in fact, 138

138

we cannot access this variable outside here. 139

139

And of course the movement property 140

140

from before, does not, no longer exist. 141

141

So we get undefined error. 142

142

Now the error message here might look different for you 143

143

by the time that you're watching this video. 144

144

Because as I said, this proposal at the time of recording 145

145

is not really finished yet. 146

146

And so some implementation details might still change. 147

147

And so that might also affect the error message here. 148

148

And speaking of implementation, I believe 149

149

that right now only Google Chrome actually supports 150

150

these private class fields. 151

151

And so make sure to also test your code in Google Chrome. 152

152

But anyway, the movements are now truly private 153

153

and no longer accessible outside here. 154

154

At least not by their property. 155

155

We do still have of course, 156

156

this method here in our public API. 157

157

And so this one we can still use to get the movement. 158

158

So that's right here. 159

159

And that was indeed the whole point of creating this method 160

160

in the first place, in the last lecture. 161

161

Now the next candidate to make private is this pin. 162

162

So in the last lecture we protected it 163

163

but now just like the movements, we want to convert it 164

164

to a truly private field. 165

165

However, this time the situation is a bit different. 166

166

Because now we are actually setting the pin 167

167

based on this input value to the constructor. 168

168

However, we can not define a field in the constructor. 169

169

So the fields, they really have to be out here 170

170

outside of any method. 171

171

So what we have to do is to create the field out here. 172

172

So the private field again with hash, 173

173

and then don't set it to anything. 174

174

And so this is essentially just 175

175

like creating an empty variable. 176

176

So in the beginning, this will be set to undefined 177

177

and then here we can redefine that value basically. 178

178

And so one more time we can see 179

179

that these class fields are really just 180

180

like any other property. 181

181

That's why later down here 182

182

we can then access it on the this keyword 183

183

and set it to the value that we received. 184

184

So let's try that. 185

185

And indeed the pin here is now also a protected field 186

186

or actually a private field. 187

187

And so when we try to access it, 188

188

we will no longer be able to do that. 189

189

Alright. 190

190

So that is truly private class fields. 191

191

And again these are gonna be available 192

192

on the instances themselves. 193

193

So not on the prototype. 194

194

And so, yeah, of course that's why we have them 195

195

right here in the instance. 196

196

Now, some people don't like the way 197

197

that the Syntax looks here with the # symbol 198

198

and there has been a lot of discussion going on. 199

199

Now, I don't mind it at all. 200

200

I just like to focus on the benefits 201

201

that this new syntax gives us. 202

202

There is a slight change that it might still change 203

203

before the proposal reaches stage four, 204

204

but in this case, I will simply go ahead 205

205

and update it as video. 206

206

But anyway, next up we have public methods. 207

207

And actually that is nothing new at this point. 208

208

So all these methods here that we have been using 209

209

are indeed public methods. 210

210

So in this case, there is not a lot to talk about. 211

211

And in fact, we had already written something similar here. 212

212

So saying that all of these methods together 213

213

are basically the public interface of our class. 214

214

And so therefore let's move on to our final point here, 215

215

which is private methods. 216

216

So let's do that down here. 217

217

And private methods, as we already mentioned earlier 218

218

are very useful to hide the implementation details 219

219

from the outside. 220

220

And that's why in the previous lecture, 221

221

we already made this method 222

222

and protect it with this underscore. 223

223

And so let's no grab this and put it down here 224

224

and now to make a private method, 225

225

the syntax is exactly the same as private fields. 226

226

So just like with the hash. 227

227

Now, the big problem here, is that right now 228

228

no browser actually supports this. 229

229

So I can just show you how it works in the code 230

230

but unfortunately I cannot show you how it works. 231

231

So if I save this now I'll probably get some error. 232

232

And so, yeah, the first one is 233

233

that this function now no longer exists. 234

234

So let's change that here as well. 235

235

And well, we don't get any error actually. 236

236

So that's surprising to me, let's see what we have here. 237

237

So indeed here we have the approve loan now. 238

238

So I guess that right now Google Chrome 239

239

simply made this method like a private field. 240

240

So that's why it no longer appears in the prototype, right? 241

241

So it's not here, but now it's, instead on the instance. 242

242

So that's not really what we want. 243

243

Let's just test if we can access it out here. 244

244

So console.logacc1.approvedLoan with some value. 245

245

And then we get the same error as before. 246

246

So private fields approve loan. 247

247

And so, yeah, it's just as I said, 248

248

so Google Chrome right now basically sees this 249

249

as a private class field and not as a method. 250

250

And so that's why I was saying 251

251

that the methods are not really yet implemented 252

252

in Google Chrome. 253

253

So private methods are not available. 254

254

And so let me just leave it here as a comment, 255

255

but I will go back to simply protect it 256

256

with the underscore convention. 257

257

Alright. 258

258

So at some point in the future, this will work 259

259

but for now, let's leave it just as it was before. 260

260

Okay, so we talked about these four features here. 261

261

So public fields, private fields, 262

262

public methods, and private methods. 263

263

Now, besides these four 264

264

there's also the static version of the same form. 265

265

And that's why I said in the beginning 266

266

that actually we have eight new features. 267

267

So there's also the private version. 268

268

And actually, and that's not private. 269

269

That is static, alright. 270

270

And actually we already used the 271

271

static public method before. 272

272

And so that worked by simply adding 273

273

the static keyword in front of it. 274

274

Remember, so just static and then some method name. 275

275

And so usually we use this for helper functions. 276

276

Because these static methods will not be available 277

277

on all the instances, but only on the class itself. 278

278

Remember, 279

279

so the static one here 280

280

only works like this. 281

281

So account.helper. 282

282

And so, as I said, there is also a static version 283

283

for all the other three ones. 284

284

But I'm not gonna show them to you now in this video 285

285

because they are really less important, 286

286

and if you want you can, 287

287

of course easily test them out by yourself. 288

288

Now, okay. 289

289

And that's actually it. 290

290

So this is how we implement encapsulation 291

291

and data privacy using the new class fields proposal 292

292

that hopefully at some point will really become part 293

293

of the JavaScript language.