Class Constructor & Properties

[00:00:00]
>> To recap what we discussed earlier, we have this class keyword now, since I believe 2015 or so, in JavaScript, that provides that nice kind of more familiar-feeling way of declension. layering kinds of objects in a sense that's more similar to how they might be defined in languages like Java or the other kind of classical inheritance-based object-oriented languages.

[00:00:37]
So, just to review some syntax. When we want to declare a new class like a meme, for example, very important class to have in your programs. We want to have a will have the class, the name of the class capitalized convention and then the curly braces kind of define what's gonna belong to this class.

[00:01:00]
So we have a constructor method always that is going to set up some properties on the this object, which is going to be the instance object when we instantiate the class. Which we can do with the new keyword, just like we did with new date. So same vibes and in this case we can make a fancy pool meme and fancy pool will be super fancy and everyone will be happy.

[00:01:27]
Great. Okay, so again just reviewing we can also define instance methods by, we don't have to use the function keyword. We can just type the name of the function, any arguments it takes in and then define whatever we wanted it to do. So, for example, I can make poo laugh, with a lull method, which very helpfully logs to the console.lololol.

[00:01:51]
So this is just an example obviously, but we can define whatever instance methods we need there. And we can also override methods of, let's say, the kind of built-in to two-string, or anything that might come from a parent class, because we can also extend classes. Get to that in a second but we an essentially intercept that prototype chain, lookups here.

[00:02:21]
Again, every object is going to ultimately have at the top of its food chain or prototype chain, it's going to have object to object, everybody's favorite object. And so those methods like to string and whatnot we can override and if there are other prototypes up the prototype chain.

[00:02:41]
We can also override those as well by declaring whatever instance methods we need here. And again, we use that this keyword to refer to the instance. So that's how we get this particular memes text. Okay, one thing we also might encounter, and this will be familiar to folks who have worked with other languages, again, like the more traditional OOP languages.

[00:03:11]
Is that we can declare getter and setter functions that JavaScript will basically use to pretend that an object has a property that I can access with the dot notation that I'm used to. So if I have a, let's say, a more complicated property that needs a little processing, or maybe I want to do some kind of check on it.

[00:03:42]
I can define a get and a set with these little keywords function that is the name of the property that I want it to have. And then I will be able to access fancypoo.imageType. And it will give me the return value, for example, in this case, were splitting out the name of the image path to separate it into the name of the file and the extension of the file.

[00:04:14]
And so if I try to access imgType, it will spit out the, In just the jpg part of this file, so for example, this is a tiny example of course, but you can have kind of more complex operations. You can expose data from instance objects through a property that is indirectly accessed through the dot notation.

[00:04:39]
So you can do a little processing you can do some checks X, for example. And we can also, with the sector, we can use that to assign a new value to the property. And under the hood, JavaScript is going back and doing whatever else it needs to do.

[00:04:58]
So in this case, it's actually going into the image property and also updating that because of the way that we've set this up. So if I assign a new value, like PNG to the image type property, then later when I want to look up the value of the image property and not just image type.

[00:05:19]
I will see that, okay, we've done some processing, we've messed with the data of this particular instance. So for those more used to kind of that mental model of protecting the good old encapsulation idea of trying to protect the internals of the object from use. By whoever out there in the world randos on the Internet, we can't have that.

[00:05:46]
So if there's any processing or any secret kind of data that needs to be used or anything like that. That can be put in these kind of fancier getter-setter methods, which then expose whatever data you want to users as if it was a regular JavaScript property. So full extra fanciness a little tuxedo for us.

[00:06:07]
Okay another thing that, again sometimes might be useful for that encapsulation idea that is coming from object-oriented programming is. Sometimes you want private data that only can be accessed from internal processing functions within this object, within this class. So, for example, I can have a private property called image.

[00:06:41]
I can make my image property private by putting the hash symbol, pound, whatever we call it these days, in front of the property name. And JavaScript interprets that specially. And note, this is not like in quotes, in a string. This is actually, we're just, .pound, is what we're typing when we access this property, and that is only going to work within this class definition.

[00:07:08]
So, if I try and access that on an instance object, uh-uh, JavaScript says, uh-uh, not allowed. So, let's see how this works, and it's the same for methods as well. Well, so for example here I've updated the constructor. So now we're keeping the image a secret and we've made it private property.

[00:07:30]
And one other note is that you need to so we saw earlier that you can declare which properties an object is gonna have on that above that construct line at the beginning of the class declaration. You don't have to if there are public properties, JavaScript all just figure it out expose them.

[00:07:50]
But for private properties, you do need to declare them up there before the constructor definition, so that then you can use them in the rest of your methods including the constructor. So just one note there, and this one might be missing the whisper, [LAUGH] which was added later, the yeah.

[00:08:09]
Again, the getters and setters then could expose that private data, that private property, by pulling that data in and then returning whatever, or doing the set operation. And so in this case, we've got an image property via these getter and setter functions so that a user is gonna be able to access this data by .image and not .hashimage emerged.

[00:08:42]
Anyway, so this is how we can kind of use that secret data private properties within our code. And okay, sorry. And yes, the same works for methods. For example, I can have a public method that's like, yelling what the text is in uppercase, but I could also have a private method that's just secretly whispering.

[00:09:07]
And this is just called once in the constructor, but this will only be able to be called from within this class definition. Okay so what this all means for your user of your beautifully laid out, very well thought out API of this object that you've created, that's very important because people need their memes.

[00:09:34]
Isn't that what we're building the web for anyway? It's basically a meme hosting cat GIF hosting solution. So, okay, so if we now have our fancy poo and we try to access the .image property doesn't exist. And if I try to access the private hash image property, I actually get an error JavaScript like no, not only like that image is image without the hash is undefined.

[00:10:01]
So regular JavaScript undefines everywhere. But the hash image will give an error if I'm trying to access it outside of that class declaration. However, because of those getter and setters, I can access the .image property. And I can set a new value, thanks to my setter function, which then, internally, the class declaration is telling itself how to process that.

[00:10:30]
And how to use the private property under the hood, but it stays under the hood. I only expose what I want via that public property image. I'm just emphasizing the difference [LAUGH] here. And likewise, for methods, hash whisper won't work, I'll get an error, but I can yell from just anywhere.

[00:10:50]
Maybe it should have been reversed, but this is why we have to be thoughtful about what we expose [LAUGH] to our users. In any case, okay so for those folks coming from that more object oriented paradigm, where we have concepts like encapsulation where the idea is. Do you want the object to expose an interface, to users that abstracts away whatever internal mechanisms are going on under the hood to make it work?

[00:11:19]
And so that's kind of a big, a big mood [LAUGH] in object-oriented programming and JavaScript now, again, with that interesting kind of circular influence of the Java language throughout the decades. Not just Java, but similar languages as well, allows us to do that now with this hash private property stuff.