this Keyword & Classes

[00:00:00]
>> WebDevSimplified: So this keyword is an interesting keyword because it means different things depending on where you are inside of your code. It usually refers to whatever you are currently inside of, kind of like scope. So we look at this when it comes to the browser, let's just come over to our browser, and we'll just say console.log this and when we print this out, you're going to notice we get something called a window object.

[00:00:21]
And if you expand this, it's massive. I mean, don't scroll through it, it's going to take you forever. And this is essentially the global object inside the browser that's called the Window object and this at the global scope references whatever your global object is. In the browser it's called the Window. Inside of Node.js, I believe it's just called global, so it's just going to be whatever that global thing is that you're inside of.

[00:00:42]
But that's not very often where you're going to use the this keyword. More often than not, this keyword is going to be used with objects. Inside this person object, I want to create a function that allows me to print out the person's name. So you can see I have a name Alice at age 25, and I have a greet function. And inside this function, I'm able to use the this keyword, which allows me to essentially reference anything else that's defined on this particular object.

[00:01:06]
Let's take a quick look at this code here. We'll expand it a little bit more. There we go. So here we go. We have a name, we have an age, and in the greet function I'm just calling hello my name is, and here is where I have that fancy this keyword. And since this will pretty much always reference whatever object or global scope you're inside of, we're inside the person object, so we are referencing the person itself.

[00:01:29]
So we have access to all the properties on our person. This is the age, the greet function, as well as the name. We can get anything we want about them. And this is mostly going to be used when you're inside of an object like this because it's the only way to access an object from inside of it, otherwise you have no way to do that. Now another thing that's inside of JavaScript is classes. This is a really large topic you can go super in depth into classes, but I find that they're not as used in JavaScript as they are in some programming languages, so I'm only going to give you a very brief overview of classes, mostly to help you understand certain features in JavaScript that are built in that use similar syntax and focuses as classes.

[00:02:07]
So to create a class in JavaScript, let's just go ahead and create one ourselves, and we want it to essentially match what this person object looks like. I want it to be essentially the same thing, but it's going to be in a class format instead. So we'll comment this code out up here and to create a class, you just use the class keyword, put a space followed by the name of the class. And one thing that's slightly different is normally with classes you actually start the first word with an uppercase.

[00:02:29]
You don't have to, it's not required, but it's standard practice to start the first name with an uppercase. So here we have a person class. Then you need to put in some curly braces like this, and inside of here is everything that's part of your class. Just like with an object, we put curly braces and define the things inside of our class, it's the same thing with a class and an object. Now inside of a class you need some form of constructor function.

[00:02:51]
It's specifically called constructor and it's going to be a function just like any other function. So think about defining a function on an object. This works exactly the same, but it has a special name of constructor. This is the thing that's called whenever you try to create a new version of this class because a class acts as like a template, a thing that says, OK, I define what a person is. A person has a name, they have an age, they have a greet function.

[00:03:14]
And you can create a new person with any values you want based on this constructor. So a constructor is a function that takes in certain values. In our case, it takes in a name and an age because a person has a name and has an age, and it sets those values inside of your object for your person. So here to set those values on our person, we need this keyword to reference ourselves so we can say this.name is equal to our name.

[00:03:37]
This allows us to set the name of our current person as the name we pass in. This.age would then be set equal to our age. So just this alone allows us to create a person that has a name and an age. Now if we want to add on our greet function as well, we can do that directly inside of here just like we would with a normal class or a normal function object. So let me just go ahead and copy greet, and we'll paste that down.

[00:04:02]
There we go, get rid of these, and you can see my code did not change at all. It's exactly the same in the class as it is in the object. No errors, it does the exact same thing. So you define a function inside a class just like you would inside an object, and again I can reference whatever the current object is with this.name. Now to create a new instance of a class, that's what they call when you create a new person that's a class, I can just say const person equals new person, and this is where that new keyword comes in.

[00:04:27]
When you're dealing with a class inside of JavaScript, you put the new keyword in front of the name of your class, and that's essentially the same as calling this constructor function. So new person calls this function right here so we can pass it in a name and an age. So let's say the name is Kyle. And we come in here with an age of 30, just like that. We now have a person object with a name and an age, so I can say console.log person and if we come and expand this a little bit, we can see we have a person with a name and an age directly on it.

[00:05:00]
So that is the whole idea of how we can create these people using this this keyword and the new keyword. Now I still want to dive a little deeper into how everything inside of here is working because this constructor function is probably a little bit confusing. You can almost think about this constructor function as a function that at the very beginning creates a variable called this, which is equal to an empty object.

[00:05:18]
Technically that's not what's happening, but you can think about it like that. It creates this variable as an empty object. Then at the very end of your function, it returns this object back to the user. So you can almost think at the very start of your function, we create an empty object with this as the keyword, and at the end we return that this back to the user so that way down here we have access to that thing we just created.

[00:05:39]
Then in the middle, all you do is you just set the values on that this object that we just created so we can set a name and an age, and now we have a person with those two different properties applied to them. Now, obviously, that's not exactly how JavaScript does it, but conceptually, that's what happens behind the scenes. So this constructor right here just takes place for being able to define all the different values we want, and if we need to define functions on this, we can just define those inside of our person class like this.

[00:06:05]
Yes, is your capitalization on the class, the convention, or is that a design choice? So it's just, it's a convention. You'll see inside of any program language, any JavaScript code you write, almost. Anytime you see a class, it'll always be capital letters for all of the words, not just, you know, the second, third, and fourth, and so on. So it's different than variables in that every word is capitalized instead, but I could write this with a lowercase p and it'll still technically work.

[00:06:27]
But generally the convention is capital letters for classes, and you'll even see that in built in JavaScript code, which we'll talk about in a little bit. You'll see they use capital letters for those things. Any other questions about this kind of class syntax? It's a very brief overview of kind of what classes are like in JavaScript. Can you clarify the constructor approach? Yeah, I'm not sure I like yes.

[00:06:50]
So a constructor is just a fancy function that's called when you use the new keyword with that person. So when I say new person, I can essentially pretend that that is calling whatever this function is. That's almost like the name of that function. And then inside this function, we essentially have a placeholder variable called this, which is an empty object by default, and at the end we always return whatever that object has inside of it, so we just return this.

[00:07:14]
So in the middle is where I define all the values for what's in my object. So up here where we have a person, we define the name and age just directly in line. Here, since we can create a person with any name and any age, we essentially need a function that takes in those values and then we can define those on each individual instance of my person class, because now if I were to come and I create a brand new person, person two.

[00:07:37]
I can pass in a different name if I wanted to, and I could pass in a different age, for example, if I wanted to inside of here, and that's going to just create a brand new person with these values set for name and age. Does that answer your question? I think so. So what is this doing in that context? Is it just scoping the variables you're passing in? Yeah, so essentially the idea behind this is classes are just another way in JavaScript to create an object.

[00:08:02]
You can essentially do the same thing with a function if you wanted, but classes allow you to kind of get a little bit extra features and stuff around building out these and yes it does scope it so when I put the name and age inside of here, they're scoped to each person. So this person has their own name and age and this person two has their own name and age. But you can see they both share a greet function.

[00:08:22]
Now the greet function has different name, for example, inside of here when I access this.name, it's going to be a different name. I don't know why this is not letting me scroll. You can see when I access this.name, it's going to reference whatever the current person I'm accessing is. So if it's person one here, it's going to be Kyle, person two would be Sally. Does that make sense? Yeah. And you said there's a built in return, right?

[00:08:41]
Yeah, it essentially automatically returns whatever this is. That's why when I say it's equal to a new person, it actually spits out that person object, whatever this keyword is, it spits that out for me with all these functions added on to it for me. I think that makes sense. I appreciate it. So like I said, there's a ton of different stuff around classes. I'm really only going to be touching on those small different sections of classes, but if you want to, you can definitely go much more in depth into classes.

[00:09:04]
I just don't personally use them very often in my code because I write more of like a functional style of programming rather than an object oriented style of programming, which is where classes really shine. Now, the main reason I covered classes is just to show you the new keyword as well as some built-in stuff in JavaScript. For example, if I want to reference a date like what is the current time of day, I can get that by using this built-in date object inside of JavaScript.

[00:09:28]
So I can come inside of here. I can say const date equals new date, and again I need that new keyword because I'm creating a new version of this date. And by default, if I pass it nothing, it'll give me whatever the current date is. And then I can, you know, use whatever I want from this. I can console.log all this stuff, and if I say date dot oops, not date that, date dot, you'll notice there's a ton of different functions and parameters and stuff related to dates that I can use to print out different things.

[00:09:52]
Like for example, I can get whatever the month is. And it'll print out some month related stuff inside of here for all my JavaScript related code. So this is the whole reason I kind of showed you that new keyword is just to understand it when you see it used for things like creating new dates and so on, because you'll see it inside of a lot of built in JavaScript code. Other than that though, I don't use classes all that often, but you can use them if you want, and they have a lot of additional features inside of them besides what I covered here.