Private Instance Fields

[00:00:00]
>> Will Sentance: Now we get classic OOP, something closer to what Chris was talking about earlier, saying, hold on, I can make changes to this stuff. That seems very concerning. We get, not specifically to answer Chris's question, but we get private fields, private data assigned to each of our returned objects, user 1, user 2, user 5, data that if we were to look at user 1 directly, right now, people, I can still go to user 1 and change score manually.

[00:00:33]
I can in my global code write user1.score++, no problem. I don't need to do user1.increment, that's then going to increase the score. If you're in a classical object-oriented language, the ability to manually go and change properties on an object, not via the function that is attached to, that is accessible, that has access to that object, you might be like, uh uh. I do not want to enable my other developers to accidentally go and change the value of score on my object.

[00:01:03]
I only want the function increment to be run on user 1 as the only way that my score property can be changed. Those are known as private fields. Those are known as private instance fields, data that is only available and accessible to the methods running on that object. You can't just go and access user 1 and say, hey, user1.score++ from global. And the reason for that, people, is code gets messy.

[00:01:28]
100,000 lines of code, I don't want someone else on my team saying, oh, I'll just change that value. I want them to follow my predictable pattern. I want them to use my increment function that was attached or has that my user 1 object has access to, and that's exactly what I now finally can do with this latest JavaScript feature. I can instead, and we're going to tweak our code here, let's use green to refer to this new feature.

[00:02:01]
I can now tweak my code here and add, uh oh, uh oh, we got run out of space. Uh, let's do it here. I can now have a new, let's do it all in green. We have in our fields a new hidden property or not new hidden property. In our field, we can now also, using the hashtag, using the number symbol, using the hashtag symbol, we can also say, JavaScript, when you create this function object combo with the helper class, in the hidden fields property, also not only add loggedIn is false, I've cut that for now, but also set up a property that when we run user creator and create out, return out our object, don't just add loggedIn is false.

[00:02:59]
We've cut that one for now just to not have too much stuff on the screen. Don't just add loggedIn is false. In this case, check our static field, oh sorry, check out fields and find that actually, we have a score property that we want to add, and this score property is going to have a very special characteristic because we've used the hashtag in front of it and set it up within the class, uh, I don't know, constructor, the thing that makes the function object combo, the class.

[00:03:39]
It's going to be available to us inside of user creator, the constructor bit, when we call it with the new keyword, and we're going to be able to set our property score on this object, and we're doing it ourselves. This.#score is available, and we're going to set the, oh, I put it on the wrong side, sorry, we're going to set it to our value 3, not radically different to how we previously did it. But this one is a special type of property on the object that we then return out.

[00:04:21]
This one is a special type of property that is only going to be available in methods called on this object directly. We will no longer be able to write user1.score++. We will get an error. It is no longer directly on the object. Instead, it is technically, when user 1 is created, #score is added technically not to the regular properties, but instead to a separate hidden, inaccessible portion of properties known as our private element properties.

[00:04:58]
They cannot be accessed outside of user 1. They can only be accessed by the methods that were defined as part of the class constructor, meaning that now, when I run user1.score++, and people, for those who are making it to the very end of Hard Parts here, which obviously all of you have no choice, this is really, really advanced, like brand new and advanced stuff, so please, you know, do be forgiving of yourself if you go, what?

[00:05:30]
So now when we call our increment function, Chris, take it away. User 1, where is it? Global memory. Global. Is increment function on either of these, well, on this property, we only have, yeah, no, so where do we look? Prototype. Up the prototype chain to, uh, through the hidden property proto to prototype where we find increment and login. So we call increment, create, uh, create a new execution context, excellent, and into it we go.

[00:06:03]
And we can see this time, the code is slightly different. This time we have this.#score++. In our local memory, we have our familiar this being assigned to whatever is to the left of the dot, which fortunately is user 1. And so now we go to user1.#score++, and because we're doing it from inside a method defined on that same class, we're able to not get an error, but instead jump straight to our hidden private fields and increment score to 4.

[00:06:37]
Now this ain't some syntactic sugar. This is some real deal under-the-hood changing of JavaScript. Uh, we can't actually, so to be clear, we can't access now score on user 1. If I had a console log user 1, now, technically we can see it within the dev tools, in order that we are aware of what our private data is, we can see it. And I hate to say technically within Chrome dev tools, we can actually even play with it, but we cannot do that within our regular running JavaScript.