This course has been updated into a 4 part series! We now recommend you take the A Practical Guide to Algorithms with JavaScript course.
Transcript from the "Defining a Class" Lesson
[00:00:00]
>> Bianca Gandolfo: So we need to define our classes. I like to think about it in terms of, okay, so what is it? What does it have and what does it do, right? And the keyword here is what. That's sort of the foundation of object-oriented programming, is based on whats, versus based on like a verb or something when we think about.
[00:00:25] Maybe like functional programming style, that means anything, maybe you've taken the functional class that we have here on Frontend Masters. So here's a what? Is our constructor function. What is this? It says it, it says it.
>> Bianca Gandolfo: It's a building, it's a building.
>> Group: It's a building. [LAUGH]
[00:00:45]
>> Bianca Gandolfo: Thank you, good job. So the what, it's a building. What does it have? Floors, right, like this building that we're in has one floor. Maybe you live in a building that has multiple floors, I don't know. Maybe you work in a building that has a bajillion floors.
[00:01:05] So that's our constructor, it's just a function, right, so just a plain function. Inside, we define properties. Our properties have key value pairs as an object, so we give them names. So the what again, is a building. Floors, we'll pass it in.
>> Bianca Gandolfo: Cool. So before we jump here, so what happens when we say,
[00:01:40]
>> Bianca Gandolfo: MyHouse, right? Oops, so myHouse equals new Building(3). This is us, creating a house. This is why my program is awesome, like how easy was it building that house? If we were able to build houses this easy in San Francisco, rent would not be so crazy. But anyway, we don't live.
[00:02:03]
>> Group: [LAUGH]
>> Bianca Gandolfo: This is not San Francisco and this is the Internet, and so here we are, with JavaScript, making houses easy to build. So we have our instance of our house here, which is just an object that looks something like this.
>> Bianca Gandolfo: "building", floors:3. So we have some like, syntaxy things here.
[00:02:37] But all it's doing, it's just creating an object that has two properties. The what and the floors, right? We pass in the floors here, right? Everyone following how this is happening?
>> Bianca Gandolfo: Yeah, okay. Any questions about how this is happening?
>> Bianca Gandolfo: Cool, so there is a little bit of magic here which is my complaint.
[00:03:03] But anyway, this keyword, new, does some magic. For better or worse, if you come from some sort of like a Java background, this might feel comfortable. You might like that. But JavaScript, my opinion is bullshit, but anyway, here we are, do use the keyword, new, does some magic.
[00:03:25] And the magic that it does, is it kinda, does like this weird thing and I'll just show you. It kind of does this, it says, this equals an empty object, so it creates this as an empty object, so that you can add all the what and the floors on it, right, because you can't add properties to something that doesn't exist.
[00:03:47] And then at the end, it just returns this. So that's what it's doing, hypothetically, behind the scenes magic, cool.
>> Bianca Gandolfo: So that's what it's doing, recreating our house. And it's just an object, there's nothing different. We're just using the keyword, new. And we have to use the keyword, this, in order to say what the instance is gonna look like.
[00:04:21] Cool, who here has done this before?
>> Bianca Gandolfo: Awesome, great. All right, and then, so that's the what. And the what it is and what it has on it. This is the what it does, right? Methods, they're gonna be functions, again, some like weird stuff that happens cuz JavaScript is just weird.
[00:04:48] We have this word prototype, it's so terrible, they do this to us so it makes it so hard, it makes my job really hard, cuz everyone's like, my God, prototype, that means something really crazy and that everything is different now because it says prototype. It doesn't mean anything.
[00:05:04] Really, it's just an object, right? That's why you can use this dot here. It's just an object. And it's an object, and what it just does is it makes, oops sorry, makes this method available on each instance, right? The instance is my house, which is an object, and this is how we put on a method, right?
[00:05:32] And the reason we do this is because, if we put it inside of our constructor function here, then every time we call the function, we'd be creating a new instance of those methods, right? And the point of a function is that, we don't create a new function every time, we just can call it, right?
[00:05:53] And so, it just saves us space. So technically, we could say, this.countFloors. We could do that, it's just not the best practice, etc., cool. So our properties here go inside, our constructor, our methods go on the .prototype. And just to clarify, this is the constructor function name. Then we say, .prototype and then dot whatever you wanna call the method.
[00:06:31] Yeah, okay. Great, any questions about this?
>> Speaker 3: So, if you call countFloors on something that's not a building, is there an error that it gives you initially?
>> Bianca Gandolfo: Yeah, so you could say myHouse.countFloors. But I couldn't say like whateverYeah.countFloors. You couldn't do that cuz it doesn't exist. It only is gonna exist on instances that were created from Building.
[00:07:01] And that's what the prototype thing does,
>> Bianca Gandolfo: In a nutshell.
>> Speaker 4: So we don't put the function inside the constructor because it's the same function for each object?
>> Bianca Gandolfo: Yeah, yeah, yeah, yeah. The reason is, so here, we're just, we're literally calling this function, right? And so every time we call a function, it's gonna run the body of the function.
[00:07:23] And then, if we say we have like, millions of buildings in Minneapolis, and your gonna create them, you don't want to have millions of the count floors function, you just want one that you can use for all of them. And so, back to my, like factory image, it's like you have like, a factory, and it's creating your buildings, right?
[00:07:44] Maybe they're like a model building, maybe different floor sizes. And each one has a floor, each one has a what, yeah? Are we following here? My hand gestures. And then, they all have like this trusty telephone line up to the countFloors method. There's only one, it's like in the clouds, and it says, countFloors.
[00:08:07] And you all have a phone that connects, and you just hit countFloors and it calls up to the cloud, and then you say hey, can you count my floors? And then it goes, yeah, and then it gives you how many floors. Instead of all of the countFloor methods being in the building, right?
[00:08:27] And they just, can just call and it's always the same.
>> Speaker 5: Just like Random Access. Is that what it is?
>> Bianca Gandolfo: Yeah, I guess you could, I don't really think about it like that, but maybe you could, yeah. So this is a pattern that we're gonna be using for our data structures, right?
[00:08:46] So the what,
>> Bianca Gandolfo: Oops, so the what is probably gonna be something like, what's a data structure you've heard of before?
>> Speaker 6: Tree.
>> Bianca Gandolfo: You now might have, maybe it has apples, and then,
>> Bianca Gandolfo: Right, and then for our prototype,
>> Bianca Gandolfo: Dot, blah blah blah. So this is how this is going to connect, right?
[00:09:30] So we have our data structure, we're going to put some properties on it. And then we're gonna add a function to the prototype. This is where it all comes together.