Jonas: Alright, so let's now implement
truly private class fields and methods.
So private class fields and methods
are actually part of a bigger proposal
for improving and changing JavaScript classes
which is simply called Class fields.
Now this Class fields proposal is currently at stage three.
And so right now it's actually not yet part
of the JavaScript language.
However, being at stage three
means that it's very likely that at some point,
it will move forward to stage number four.
And then it will actually become a part
of the JavaScript language.
And that's probably gonna happen
some point soon in the future.
And that's why I decided to already include
class fields in this course.
And in fact, some parts of this proposal
actually already work in Google Chrome,
but other parts don't.
At least not at the time of recording this video.
Now for starters, why is this proposal
actually called Class fields?
Well, in traditional OOP languages like Java and C++,
properties are usually called fields.
So what this means is that with this new proposal,
JavaScript is moving away from the idea that classes
are just syntactic sugar over constructor functions.
Because with this new class features classes
actually start to have abilities
that we didn't previously have with constructor functions.
Now to many developers consider this to be a big problem
but personally, I'm not sure if it is such a big deal
for the average JavaScript developer.
So as long as you still understand
how prototypal inheritance and function constructors work
then I believe that you will be fine.
But anyway, no matter if you end up using
these new class features, let's now start exploring them.
So in this proposal, there are actually four different kinds
of fields and methods, and actually it's even eight.
But in this video, I'm just gonna focus on these four.
And that's public fields, that is private fields.
And then we have public methods
and we have private methods.
So essentially there is a public
and a private version of both fields and methods.
And let's now start with public fields.
So we can think of a field as a property
that will be on all instances.
So that's why we can also call this a public instance field.
So basically in our example here,
the two fields could be the movements and the locale.
Because these are basically two properties
that are gonna be on all the objects
that we create with this class.
Because we do not pass any of the values here in,
so into the constructor.
And so this array and this language
they will always be set for all the instances right?
And so let's now add them as public fields.
So that works simply like this.
We can say locale equal and then navigator.language.
And then here, we actually need to write a semi colon
which is kind of weird because between these methods
we do not need commas or semi-colons.
What's also weird is that this kind of
looks like a variable here right?
But we don't have to declare it using like const or let,
so this is how we simply define a public field.
So let's write that here.
So public fields.
And the other one is gonna be this movements
and I will still for now call it _movements.
And so I'm setting it to this empty array now.
And so when we reload this, now you will see
the attendee account here worked exactly the same.
So we still have the locale here and also the movements
but now they are actually public fields,
but in our final object here,
that doesn't make any difference.
Because again, these public fields here
are gonna be present on all the instances
that we are creating through the class.
So they are not on the prototype.
So this is important to understand.
So all these methods that we add here
they will always be added to the prototype, right?
But again the fields here, they are on the instances.
Let me write that here as well.
And so again having this here,
is essentially exactly the same as this.
And therefore these public fields
they're also referenceable by the this keyboard
and they are also referenceable via the this keyword.
Great, so that's public fields.
Next up, let's talk about private fields.
So this is number two.
This is number one.
Let's add that here as well.
So just to keep a nice overview of all the things
that we are learning here in this lecture.
Alright.
So private fields is the one
that we have actually been waiting for.
So with private fields we can now make it
so that properties are really truly
not accessible from the outside.
So just like in the last lecture, let's start
by now finally making the movements array private.
So let's move it here.
And now I will remove the underscore
and then I will use the # symbol.
And so this is the syntax that makes a field private
in this new class proposal.
So let's try and reload to see what happens now.
And indeed we get some error.
And the reason for that is that the property
is now really called #movements.
So we need to change that everywhere.
So both here and here.
Now, that's it.
Give it a safe and now it all works.
So let's see here we now actually have
the movements in this array,
which is called #movements now basically.
And so now, we are finally gonna be able to see
that this property is indeed protected.
So if we try to read account1.movements
then we get a syntax error.
So private field movements must be declared
in an enclosing class.
So basically JavaScript things that I'm trying to implement
this private class field out here.
And that's the reason for this error.
But what matters is that, in fact,
we cannot access this variable outside here.
And of course the movement property
from before, does not, no longer exist.
So we get undefined error.
Now the error message here might look different for you
by the time that you're watching this video.
Because as I said, this proposal at the time of recording
is not really finished yet.
And so some implementation details might still change.
And so that might also affect the error message here.
And speaking of implementation, I believe
that right now only Google Chrome actually supports
these private class fields.
And so make sure to also test your code in Google Chrome.
But anyway, the movements are now truly private
and no longer accessible outside here.
At least not by their property.
We do still have of course,
this method here in our public API.
And so this one we can still use to get the movement.
So that's right here.
And that was indeed the whole point of creating this method
in the first place, in the last lecture.
Now the next candidate to make private is this pin.
So in the last lecture we protected it
but now just like the movements, we want to convert it
to a truly private field.
However, this time the situation is a bit different.
Because now we are actually setting the pin
based on this input value to the constructor.
However, we can not define a field in the constructor.
So the fields, they really have to be out here
outside of any method.
So what we have to do is to create the field out here.
So the private field again with hash,
and then don't set it to anything.
And so this is essentially just
like creating an empty variable.
So in the beginning, this will be set to undefined
and then here we can redefine that value basically.
And so one more time we can see
that these class fields are really just
like any other property.
That's why later down here
we can then access it on the this keyword
and set it to the value that we received.
So let's try that.
And indeed the pin here is now also a protected field
or actually a private field.
And so when we try to access it,
we will no longer be able to do that.
Alright.
So that is truly private class fields.
And again these are gonna be available
on the instances themselves.
So not on the prototype.
And so, yeah, of course that's why we have them
right here in the instance.
Now, some people don't like the way
that the Syntax looks here with the # symbol
and there has been a lot of discussion going on.
Now, I don't mind it at all.
I just like to focus on the benefits
that this new syntax gives us.
There is a slight change that it might still change
before the proposal reaches stage four,
but in this case, I will simply go ahead
and update it as video.
But anyway, next up we have public methods.
And actually that is nothing new at this point.
So all these methods here that we have been using
are indeed public methods.
So in this case, there is not a lot to talk about.
And in fact, we had already written something similar here.
So saying that all of these methods together
are basically the public interface of our class.
And so therefore let's move on to our final point here,
which is private methods.
So let's do that down here.
And private methods, as we already mentioned earlier
are very useful to hide the implementation details
from the outside.
And that's why in the previous lecture,
we already made this method
and protect it with this underscore.
And so let's no grab this and put it down here
and now to make a private method,
the syntax is exactly the same as private fields.
So just like with the hash.
Now, the big problem here, is that right now
no browser actually supports this.
So I can just show you how it works in the code
but unfortunately I cannot show you how it works.
So if I save this now I'll probably get some error.
And so, yeah, the first one is
that this function now no longer exists.
So let's change that here as well.
And well, we don't get any error actually.
So that's surprising to me, let's see what we have here.
So indeed here we have the approve loan now.
So I guess that right now Google Chrome
simply made this method like a private field.
So that's why it no longer appears in the prototype, right?
So it's not here, but now it's, instead on the instance.
So that's not really what we want.
Let's just test if we can access it out here.
So console.logacc1.approvedLoan with some value.
And then we get the same error as before.
So private fields approve loan.
And so, yeah, it's just as I said,
so Google Chrome right now basically sees this
as a private class field and not as a method.
And so that's why I was saying
that the methods are not really yet implemented
in Google Chrome.
So private methods are not available.
And so let me just leave it here as a comment,
but I will go back to simply protect it
with the underscore convention.
Alright.
So at some point in the future, this will work
but for now, let's leave it just as it was before.
Okay, so we talked about these four features here.
So public fields, private fields,
public methods, and private methods.
Now, besides these four
there's also the static version of the same form.
And that's why I said in the beginning
that actually we have eight new features.
So there's also the private version.
And actually, and that's not private.
That is static, alright.
And actually we already used the
static public method before.
And so that worked by simply adding
the static keyword in front of it.
Remember, so just static and then some method name.
And so usually we use this for helper functions.
Because these static methods will not be available
on all the instances, but only on the class itself.
Remember,
so the static one here
only works like this.
So account.helper.
And so, as I said, there is also a static version
for all the other three ones.
But I'm not gonna show them to you now in this video
because they are really less important,
and if you want you can,
of course easily test them out by yourself.
Now, okay.
And that's actually it.
So this is how we implement encapsulation
and data privacy using the new class fields proposal
that hopefully at some point will really become part
of the JavaScript language.