So now I want to show you a little bit about how we build classes in JavaScript. Show how we built our own classes and how classes work internally. You may have noticed that the coffee cup that I'm using during this JavaScript lecture has code on it. And the code is somewhat JavaScript-y, I think it's JavaScript. It's C, Java, I think this would be C or JavaScript or Java. because again, these are all related languages. So let's take a look at a sample class here. And so the first thing to notice is that it uses function as the keyword to define a class. Now, you might see what's called ES6 classes, and it's a syntactic sugar that layers on top of this that makes the syntax look more like the other languages. And so this is kind of like vanilla, the underlying actually how they work. And so I guess I'm glad that they've made syntax that looks like everything else. But it really belies the elegance of the original way it works. The syntax doesn't change how it works, this is how it really works. And the things that's super excellent about this is that it uses the function keyword, there's not a different keyword, okay? Every other programming language pretty much when they go into an object, they use a different than they're in their procedural. So a class is a specialized function that, as a side effect of its execution, returns code and data, okay? Now we'll see that we invoke it a little bit differently. So let's start and take a look at what we've got here. We've got this function PartyAnimal, right? So PartyAnimal is the name of the class, but it's code. And again, we have a curly brace to start it. And the thing that's different is there's this notion of this. So we make sort of an empty vessel that is going to be the object that we're going to use this class to populate. And then by running the code, we're actually populating that empty vessel. So this.x is going to create a member variable called x inside this. Which is the empty vessel object that we're creating and then we're going to fill up, okay? And then we have this.party. this.party is also a piece of data in the this object that we're about to create. And you'll notice that we're saying equals and then function. But this one is a little different. You notice the function is unnamed, it is what we call an anonymous function, because it doesn't have a name. So the function's name is actually called party. But it just happens to be called party because we're storing the functions code in a instance variable called party. But that's how we're going to call it. So in the party variable we have the code that is those two lines. And then within that method, now I'd call party a method and use the terminology. Within the party method, this is the instance that we're talking about. In Python, we use self for this, right? And different languages have this concept of the current object that we're part of. this.x is referencing, remember how we talked about global and local inside of functions? Well, this x is actually outside of the function. So this is an advantage that this.x is defined inside the function. And because this is defined before the function definition, it sees that, right? And so we're going to add 1 to that member variable. And then we're going to put out a console log message, and that's our entire object. Its got one attribute called x and one method called party, okay? So we could just call this this function PartyAnimal, but that's not what we do. We have a new keyword called new, and it says look, don't just run this code. Create an empty object, and then use the PartyAnimal code to sort of fill out that with a bit of code in a bit of data. And so that says run all this, but instead of just running it, give me back the thing that eventually it produces. It's as if there's a return statement at the bottom of the thing, at the bottom of PartyAnimal function. And then give me back the object, and now I have an object. And it's got an x in it and it's got a party in it. Then an is where I store that object, so an is my first instance of a PartyAnimal object. But now I can talk to an.party and called again and again, so I call an.party three times. So I call the method party, okay? So that is the basic mechanism. And so if we were to somewhat trace through this, this part here, the function just as a template that it's remembering the template and naming it PartyAnimal. And at the point where we have an = new PartyAnimal(), JavaScript constructs this object. And it's got two things in it, It's got an x in it, and it's got a party in it, x is data and party is code. And then that's what it looks like, but it's got, well actually no. The construction, let me change here. The construction also put a 0 into this.x. And so it as a part of the creation, we ran all this code to construct a PartyAnimal, and this got set to 0. So when we're at this next line of code, before we call an.party for the first time, an.x has got a 0 in it. Then we call an.party, and it runs the code. an.party, this an is an alias for this. And so in a sense when it says that this.x, it really is an.x. Now we'll see in a second how when do multiple instances how that works. So it runs the code, and then it adds this to be 1, and then it prints out the first line. And then it does it again, and then it becomes 2, and it prints out the second line. It does it again, prints out 3, makes it 3, and prints out the third line. So that's how this code works. This is the constructing or creation or taking the little cookie cutter and poof, making a cookie out of cookie dough. You've got a bunch of cookie dough, that's like a little object that doesn't exist, it's got no form. And then we take the template, [SOUND] and we make the thing. So I mentioned the word constructor, because it there is a moment where it's actually building the object and filling it up with all the little pieces. So objects are created, used by us, and then discarded. And there is this concept of a bit of code called the constructor in object-oriented theory. That says look, I'm going to start an empty object and then I'm going to fill it with stuff. And the constructor is the sort of filling it up, so it's ready to do its job once you're done constructing it. Destructors are a common concept, and we talked about those we talked about object oriented Python. You don't get to get ahold of the destructor inside of JavaScript. That's something that they just don't let you do. And I think it philosophically has to do with the idea that you're in a web page. You're not going to be there for very long, and that's really the earliest of days, right? These days with things like Vue and React, some of these JavaScript pages last a very long time. And maybe it'd be useful to have destructors in there. But JavaScript didn't have them in the beginning. Okay, so the constructor is, in a sense, the moment where this new is triggering the constructor. And what it basically does is creates basically a blank object that has nothing in it. And then runs the code inside a function PartyAnimal to give some form to that object, right? And so this right here is the constructor, right? And so I just put a console.log so you can kind of see where that happens. It says, I'm in the constructor. And then this thing works the exact same way. It's just a kind of instrumented the moment that we're in the constructor, okay? And the purpose of the constructor in object orientation is to set the initial conditions of the object so that the object is ready to be used. And like setting x to 0, setting x to 0, is apparently for this object, a necessary condition. So once we have a template, cookie cutter, we have a class, PartyAnimal's our class. Then we can make many different objects. And then those objects have each independent data, that's the key to this, right? And we call this having multiple instances or multiple objects that implement a particular class. So here we go, here's our same old PartyAaimal that we've been talking about all along. The only difference now is we actually give a parameter here. And so one of the things that this is going to do is, as part of its construction, it is going to copy that first parameter into one of the instance variables. So we're going to have two instance variables, this.x and this.name. And we're going to copy whatever that is. Now, where does that come from? Well, it comes from the moment of construction when we're saying make me a new PartyAnimal. And here's a constructor parameter. So that Sally goes in as nam, so this.name equals Sally. this.x equals 0, and then this.party is exactly the same way. And so when we run this, When we run this, it comes in, it constructs Sally. Setting that, and it says Built Sally, that's that nam. And then we call Sally s.party. So this is the actual object is in the variable s, we call s.party. And this.nam is Sally, and it's equal to 1. And then we make a new one, we make a new one. going to make a new one, but this one's going to be called Jim. So we make a second variable, a second instance variable is going to have a second copy of x and a nam, and actually a copy of party, right? And so then it'll say Built Jim, and then we say j.party, and then we set Jim to 1. And then s.party, and that sets Sally to 2. And so now the j variable and the s variable are completely independent variables. And so halfway through, so when we're down to here, we've got this object, s.party. Well, x starts out at 0, and the name here is Sally, right? And then s.party comes in runs in here and prints out Sally=1, right? And then comes back, and then we're going to create a second one. So we created a second one, and that'll be in the name j, in the variable j, right? So we've created one, oops, we've created one, create Jim. Out comes Built Jim, and then this is 0, this is Sally, this is 1, this is 0, this is Jim, right? And it says Jim=1, and then we're going to call s.party here at the very end. And so it's going to run this party code again. Except now this, well, this is an alias of s. So you can see how when we call j.party, this is an alias of j. And we call s.party, this is an alias of s. These are instance, instance. So s is one instance and j is another instance of it. And so that's how we take one class and make multiple instances. And each instance has their own independent copy of the variables. So that's a real quick introduction, mostly to get syntax. I'm not going to ask you to write a bunch of objects, but we're going to use a ton of them. And when you start learning what jQuery, and document object model, and all that stuff, this dot syntax and the methods and the member variables, the attributes, away you go. So you've gotta know all this stuff. So class is a template, a method or messages the code that's inside of objects and classes. And then attributes is the data inside objects and classes. And then constructor is the code that runs as one of these things is created. So that's a real quick romp through object-oriented JavaScript. It's actually in some ways one of the, I debate with myself whether I think the Python or the JavaScript object oriented pattern is more prettier. I mean, there's other ones that aren't as pretty as these two. So in Python and JavaScript, I think we're fortunate to have two very mature and very advanced thinking in how to really build beautiful object oriented systems. [MUSIC]
