Private Properties & Methods

[00:00:00]
>> Maximiliano Firtman: The part that I think that you will use on a daily basis, if you like this, because I think that there are a lot of people against this. But anyway, it is what it is, so we have to get used to that. From ES2019, we have a new way to define private class variables, private class variables.

[00:00:22]
So you know that, for example, if I have a class here, and I create the constructor, and in the constructor, I create a variable. You know that you don't define variables yet in ECMAScript, more than just using the variable with this. If I wanna create a private variable with a value, it's not really private.

[00:00:44]
For years, we were using techniques like using an underscore to express to someone that this is private. But it's not really private, I can actually always get to that value, okay? So it's not really private. Well, now, from ES2019, we can create a private variable by using a # as part of the identifier.

[00:01:09]
And now, I'm seeing those faces like, what? Yeah, that's the syntax. It's a #. And if I try to use the # now, it will say, no, no, no, this is a private field. And then I can create a public property that returns this.#privateVar. So now you can access it but through a method that you check if you wanna keep that data or not, okay?

[00:01:43]
So it's up to you. If not, you can just keep it as private forever. So within the class, you can access the value, but not outside of the class. Make sense? So it's just that. It's pretty simple. The weird part is the symbol, right? The syntax seems weird.

[00:01:59]
Because in JavaScript, seems like not part of the usual syntax that we are used in ECMAScript, okay? So again, this works only within classes, so it's not gonna work as a normal variable. So don't use the hash in a variable or with let or const, okay? So it's just with fields or properties, okay?

[00:02:24]
Make sense? It's just that, and it's really private. By the way, being private doesn't mean that in the dev tools, you can actually get to the value anyway, okay? So if it's browser-based, this is client-side JavaScript. You can always get into, but at least from a code point of view, it's private in TypeScript.

[00:02:48]
It's like adding a private in TypeScript, okay? Now, this is ECMAScript 2019. Now, 2022, so this is a recent part. Now, you don't need to use this. You can, within the class, declare fields, public fields or private fields. So, again, going back to the previous example, remember I did this, this.#privateVar.

[00:03:20]
No, I was using the constructor. Constructor, okay, this private equals to any value. So maybe you are thinking, why Max, you are not just adding the property here? Well, because this is a different spec. On 2019, we didn't create properties like this. You can say, but I've seen this.

[00:03:43]
Maybe you've seen this in maybe React using Babel, because you were using modern version of ECMAScript, or you've seen this in TypeScript, because it was available in TypeScript, but not in ECMAScript. So in ECMAScript, the ability to define public fields or public properties directly in the class body without this., it's new from ES2022.

[00:04:12]
And it can be public or private. How do you know that? If it has the hash, prefix. Yeah?
>> Speaker 2: I haven't worked with React class components in a minute. So I don't remember this very well, but it used to be really common to use a static keyword for constants.

[00:04:31]
Does static interact with the hash for privacy, etc., in specific ways, or is it just, they're just seamless Interrupt?
>> Maximiliano Firtman: Well, these are clearly instance fields, okay? So they are fields or properties of instances from this class. The static is something that we will see next. So we do have a static that is also kind of new.

[00:04:57]
And if you have seen that in React, it's because you was probably using ESNext because React, five years ago, seven years ago, was using a lot of features to make the code cleaner that were not actually shipped in ECMAScript yet, at the time. They were ESNext. ES Next was, it's a stage three, but Babel was actually then transpiling that into JavaScript.

[00:05:24]
Now, it's in the spec, so you can use it directly in the browser without Babel, okay? By the way, here, the tool that I'm using here to render these websites is not using a Babel or anything. It's just running JavaScript in the browser, okay? So, well, we have instance fields, they can be public or private.

[00:05:43]
The difference is the hash prefix.
>> Speaker 2: But for, say, class fields or class methods, with the static keyword- With the static keyword, yeah. Those do interact with the privacy hash or they're separate?
>> Maximiliano Firtman: No, because if it's static, it's public.
>> Speaker 2: Gotcha, thank you.
>> Maximiliano Firtman: And something that is new is the syntax should create #privateMethods as well.

[00:06:11]
Which, again, it feels weird, or you when you look at those, it feels weird, you're executing a method starting with a hash, okay? By the way, hash is not a valid identifier for variables in JavaScript or for any other thing. So that's why they use that and not underscore or things like that, because the underscore was already a valid identifier, okay?

[00:06:36]
And remember, we have backbar compatibility. And now, we can have #privateMethods as well. Remember, these methods, in this case, can only be executed from within the class, not from outside, okay? It's just that. Not really a big deal, but it's a big deal for our brain to get used to this syntax.

[00:06:57]
And if you're used to TypeScript, you also have a problem, because from now on, you need to pick which syntax you're going to use. Because remember that TypeScript is a superset. And then you can use ECMAScript private fields, or you can use the TypeScript private properties. And it's a different syntax, okay, but anyway.

[00:07:17]
We have any question, private fields? Yeah?
>> Speaker 3: Does the private keyword exist or do private properties-
>> Maximiliano Firtman: No, the private keyword does not exist in JavaScript. So we don't use private as a prefix for something. I mean, here in the tool, you will see a different key, but that's highlighting, but it's not there.