ES6 JavaScript Classes the Easy Way | Stephen Mayeux | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (55m)
    • 1. What You'll Learn

      2:18
    • 2. The Old Way: Function Constructors

      9:58
    • 3. The New Way: ES6 Classes

      6:40
    • 4. Static Class Methods

      10:00
    • 5. Extends and Super Keywords

      9:42
    • 6. Getter Methods

      6:52
    • 7. Setter Methods

      9:47

About This Class

In 2015, the JavaScript programming language got a major facelift with many improvements to the syntax and tons of new features. This new version is known as ES6, or ES2015, and each year since an updated version has been released.

ES6 Classes, as well as instance and static methods, are vitally important to know and understand because so many projects and companies are migrating to the newest version of JavaScript. Many Front End libraries, such as React, rely heavily on the new Class syntax. 

They might look very confusing, but ES6 Classes are very easy to pick up once you know the basics.

Transcripts

1. What You'll Learn: Hello. My name is Steven. My you and you're watching the best Js dot com in this video series, we're gonna talk about javascript classes. It may seem really complicated and hard to understand, but classes are really simple, really simple concept. And it's a new feature and E s six, which is the newest version of Java script and, ah, lot of new projects and companies and all sorts of organizations are using the newest version of Java script. And so it's important to understand some of the new syntax features. And if you're learning something like react and reduction Well, guess what React uses tons of classes, and it's important to understand them in order to be a very good react developer. Okay, so if you need help during this video, Siri's you can come to might get huh profile. Get up dot com slash Stephen My, you and you can find the source code for all of the exercises right here. It says, skill share Java script classes, and you can find all the files right here in order of the videos, and you can click on it and compare your work to mind. And that's a very good place to go to if you get stuck. Now, if you need some more help. If you need a personal tech tutor, consider me to be a personal tech tutor. I offer one on one personal tutoring services, and I've helped dozens and dozens Probably close to I don't know, about 50 people so far, with their Web development and learning JavaScript and full stack development from all around the world. Many of them have gone on and found jobs as developers. And I could do the same thing for you. Okay, so let's stop right here. In the next video, we will have an introduction to what classes and objects and things like that are. And then I will show you all the cool stuff that you can do with this new syntax. Okay, I will see you in the next video. Goodbye. 2. The Old Way: Function Constructors: Hello. I'm Stephen. My you and you're watching the best Js dot com. Okay. In the last video, I explained that JavaScript classes are a new feature to the language. They were introduced in E s six and that's the newest version of Java script. But before we actually implement classes and learn about them, I want to talk about how we did something similar with E. S five, the previous version of Java script. And we didn't have classes back in the day. But we had something called function Constructors and funk. Its function constructors are functions that would create objects for us. So let's create a function constructor and a tested out in the console. All right, so I'm gonna create a function, will call it person, and that will take two arguments, first name and the last name. And this person object is gonna have several properties and methods. So the properties will be this dot first name and that will be equal to first name. And this stuff last name will be equal to last name. And let's just suppose, for instance, this person does not have a job. This person is a student and doesn't work. So this don't has a job equals false. So, uh, any time you see this, this keyword in Java script Okay, that is well, at least in the function constructor, that is going to point to a specific instance of this constructor, and we'll talk about what that means in just a moment. But just know that this is talking about a specific person, one person. Okay, everybody in the world, you know that they have unique characteristics and we're not all the same. And these are properties. So properties, they have values like strings and billions and numbers and other types of data. Now we can also give our person different methods and methods. Air just functions. Okay, so let's write a couple of methods and then we'll test it out in the browser. So this the full name will be a function. And you can guess that it will return the first name and the last name combined with just a space. So we'll say, return this dumped first name. We'll put in a little space right there. I prefer single quotes in my Java script and this stopped last name. That's looking good. Let's write a couple of other methods right here. This don't set first name. Okay, If we want change the first name, then we'll just reassign that stopped first name and let's do the same thing for the last name this dot Set. Last name resetting it right here. Okay, now, we'll take a look at this. I'm gonna copy and paste this in my browser. I'm gonna come over here to a blank page. The your realm. It's just about Cole and Blank. It's literally nothing. And what I'm gonna do is right. Click anywhere on here, choose inspect, and you're deaf. Tools are gonna come up and nothing is in here. But I'm just gonna open the console right there. And for some of you may be your depth tools are gonna pop out to the side or to the bottom . But if you click on the three little dots right here, you can pop it out, and then you can really see it. Yeah, more, more clearly, it will take up your whole screen, and I'm gonna paste the code that we've just written in a text. Editors and I'll blow that up. So it's a bit clearer to see right, and you'll get undefined. But that's totally okay. Now, let's create a person object. So I'm gonna say var person one equals new person, and I have to give it a couple of arguments. So, Stephen my, you all right? And now let's see person What? Okay, there is person one. Okay, It's an instance of this person function constructor, and look at that. It's an object. It's got the curly braces and we were able to create an object using ah function constructor. So we got a couple of properties here, and we could very well do. This is many times as we want to. Same person. Okay, lets see. Bill Gates. And there it is a new object and we can see the different properties of thes people. Let's go to person to that last name. Let's try that now and there it ISS Let me just clear it out here. Hey, Sorry. I'm gonna command K. There we go. And let's see here will say person one dot full name. Now, this is a method, so I have to invoke it. And there it ISS and I can person 1.0.1 set first name. Okay, let's give it Steve instead of Stephen. Many people call me that. And if I run full name again, it's Steve. My you. Now. And if I run first name, it should be Steve and not Steven. Okay, So coming back to the terminal right here, all of these properties and all of these methods, they are public. And it's possible to work with private variables and a function constructor as well. So anything that's pre Penn did anything that begins with the this keyword is gonna be public and and made available. But there may be some instances where you want to keep some variables in some data private . Well, if that's the case, just declare a regular variable inside of your function constructor. So, for example, if we say bar secret equals tacos are love really love tacos, we'll come back. We'll just reset everything. We're gonna just pace that again. Now we have the secret in their I see if our person we'll see far person three to be new person. Well, say, um, I don't know who Charlie, My dog. He definitely doesn't have a job. Hey, now, if I try to say person three dot secret it's gonna come back undefined. Now you can still work with secret variables If you'd like to. For example, we can add in another method this dot Get secret, that'll be a function. Thank you. In return the secret. Let's try this again. Yes. And now we have our get secret method right there. So we'll see Far person four. And we'll see a new person. Okay, well, see, Gina, that's my other dog. My, you and person. Four. And we still cannot access the secret. But if we call the get secret method and it works, okay, so going back right here, function constructors are through the old way that we do. Classes and classes essentially behave in the same way. We use function constructors in classes in order to create objects. Specifically, we create instances. And when we use the new keyword, as I've done right here, we say that we have in Stan. She ate it. Okay, We haven't Stan Shih ated a new instance. Or in stand shade, a new object. So in the next video, we're gonna do the same thing that we've done right here. But we're gonna use the new E s six class syntax. And in the subsequent videos, I'll show you even mawr advanced features with classes that are important to note. So let's take a break. And in the next video, we're gonna redo the same thing. But it's gonna be in a e Essex class in Tex. Okay? I can't wait to see you there, but fine. 3. The New Way: ES6 Classes: Hello. My name is Steven. My you and you're watching the best J s dot com in the last video I showed you have it. And Stan, she ate new objects with function constructors. It's the old way of doing things in Java script. Now we're gonna take what we've done with the constructor and basically translate it into a new E Essex class. So enough talking. Let's just go ahead and do it. Okay? Right here. I've created a new file, and we're gonna use the class keyword. We're gonna call it person. Okay? Now, inside of this, I'm going to create a new function or a new method. And it is called Constructor. The constructor method are the constructor function. It is a function that immediately gets invoked immediately. Gets called whenever we use a new key word. OK, so all of that initial set up that we've done right here initially, uh, this is what we're gonna do in the constructor method. So we're gonna need a first name and last name. Yeah, and same thing. This stop first name equals first name this dot Last name equals last name. And this doctor has job. He goes false. All right, so all of that initialization that we will do it will happen in the constructor function. And this gets called as soon as we create a new instance of the person class. Now, we're gonna recreate these three methods right here. Ah, full name set First Dane and set last name. And they're gonna behave in the same way. But there is just some shorter and more succinct syntax, in my opinion, less typing for us, which is really good. All right, so we were right. Full name, and we will return. I'm gonna use es six string templates. Okay. And dollar sign this. The first name dollar sign again. The stock. Last name. Okay, that looks good to me. Uh, don't necessarily have to add a semi colon, but let's just do a good practices right there. All right, let's do the same thing for set. First name, first name and rates could be the exact same thing is before and then set Last name. Okay. And you could see right here these methods, they're doing the exact same thing as we've done in our function. Constructors. But look at this. It's it's so much more succinct. Okay, First of all, we don't need to use this in front of it. And then, second of all, we can get rid of the function key word and the equal sign. And when we do that, it becomes a new E s six cent tax for methods. So all you have to do is just get rid of this. Get rid of the equal sign and get rid of the function key word, and it will behave in exactly the same way. Now, I'm not contaminating the strings and using string templates, but it's essentially doing the same thing we're doing right here. All right, so let's say that Let's go ahead and your browser. We're gonna copy and paste this. Okay, let's try it out. So I'm gonna use E s six instead of our I'm gonna use const. Const Person. One equals new person. All right, Well, do my name. So let's try it out. Person one. Okay. Awesome. So we have Oliver Properties right there. So I could say person won the first name. Person, One last name, person one. Oops. Full name. And there we go. I can even use the set. First name and set last name methods. So let's do that. So, person one set purse. Ning, Let's change it. This Steve and then person one set last name instead of my you. How about Myers? Now? I could say person one. Get see full name Vocus. And now we have Steve Meyer. Okay, so once again, whenever we use that new keyword So cont what's a person to our office repeated right here ? Whenever we use that new keyword to inst And she ate a new instance of the person class this new keyword what happens is it's whoops accidentally doing all sorts of bad things right here. Just a moment with me. There we go. All right. So whenever we use that new keyword this method, the constructor method will automatically get in vote. And this is where we do all of our initialization and these are instance methods okay. And they belong to the different instances. Alrighty. So let's stop right here. And in the next video, we're gonna talk about creating static methods. You see these air instance methods and they belong to a particular instance, like person, one person to person three. It's unique to that instance But now we're gonna create methods that don't belong to an instance but belong to a class itself. So we'll stop right here and take a look at what that looks like in the next video. But by 4. Static Class Methods: Hello. I am Stephen. My you and you're watching the best J s dot com and the last video we took our function constructor that we made earlier and we changed it into an e Essex class. It's very similar. We talked about the constructor method. This gets invoked immediately as soon as we use that new keyword. And we shortened up all over verbose methods right here in the constructor into something that looks much nicer. Okay, now, in this video, we're gonna talk about static class methods. You see, these methods are instance methods and they belong to a specific instance of the class like person, one person to person, three. Every time we use the new keyword, we are creating a new instance. All of these properties and all of these methods, they belong to that particular instance. But what if we want to create a method that doesn't belong to an instance but belongs to the entire class? Well, we could do that with static methods. So just to bootstrap everything, I'm going to take everything that we have right here a copy and paste it over to this new file because we're gonna re use a lot of code. All right, so it's the same thing that just copied and pasted it over there. But now we are going to create a new method, and it doesn't belong to the instance. It belongs to the class, and we're gonna use the static keyword. We're gonna call this species species method, and we're gonna return home. Oh, se bian's okay, So the static keyword tells us that it's not a instance method, but it belongs to the class person. All right, so let's copy this over. Good. Your browser. All right, well, refresh everything. I haven't seen issues right here, so I don't think we're gonna refresh. Let's open up her console again. Okay, good. All right, Now we got a class, and here is the static method. Okay, so let's do this again. Constant person. One new person. Stephen my You All right. And if we do a person one first name. Okay, we get Stephen Person. One last name. All right, My, you. This is working as expected, but let's try person one. Doc species. Okay. That is a method with work. Nope. Species is not a function. Okay, because we're using the static keyword, and it doesn't belong to an instance person. One is an instance in this method, it doesn't belong to any instances. It belongs to the class. So if I said person dot species and invoke it, then I get Homo SAPIENs. All right, so let's build upon this. We're going to create one more static method static, and we'll call the species sentence return. Okay, Humans are classified as the dollar sign this done species, and I'm invoking it. All right, so let's copy and paste this. Go back to the browser. Refresh. Let's do constant person one again. All right and skin. You do the person the species there is can't that's looking good. But if we do person species sentence and evoke it, humans are classified as Homo SAPIEN, huh? Now, we didn't write homo SAPIENs in that sentence. We wrote this dot species and invoked it. So what's going on in here? Well, normally, when we use the this keyword like when we used it in her function constructor. And when we used in our basic class, this referred to a specific instance. But but but But if you use the this keyword inside of a static method. It's not going to appoint to the instance it's gonna point to the class. So here we have a static method and it's gonna return a string. And here is that this keyword and it's inside of a static method. So it's gonna find a species method that is a class method of person, which is this. So this method, it returns Homo SAPIENs. And that's why we get the string. Humans are classified as Homo SAPIENs. All right, So before we conclude this video, I want to talk about one other feature that isn't officially adopted in E. S six yet. So these are static methods, Okay, They are functions. You have to invoke them and they return some sort of value. But if you are a react developer, you might come across something called static properties. So these air methods, but properties air just, you know, everything except for a function that could be strings, numbers, billions, etcetera. So, for example, static. Um and I don't know. Well, let's try to let's try to. Instead of making this method, I will just say static species equals homo SAPIENs. We're going to see that. Okay, we're refresh okay if you try to do a static property, okay? Just a regular variable. And now the function You're going to get an error. This is because static methods are official. They are officially adopted and es six. But static properties. This part is not now. The problem is a lot of people and react. They used static properties. So in order to get around this, we use something called babble. Let me just bring that over here. Babble Js dot io We use something called babble in order to use thes extra features. And if you do a Google search for E s six stages fact, I'll do that for you right now. He s six stages. Thank you. You'll come across a these different pages right here. That t c 39 proposals so on and so forth. And, well, there are all these different stages. You have state three stage to stage one and stage zero now. Now, the ones that have been officially adopted, uh, these are gonna be higher numbers on, and I think there's also a stage four, I think. Don't don't quote me on this, but but these were the ones that are approved are or are pretty close to being approved, but that the other features that air stage two and one and ST zero. These are being considered for approval, but they're not quite official yet. And you have to use some babble plug ins in order to use these on these unofficial features of es six static properties. They are an unofficial feature and you need a babble plug in in order to render this correctly. Otherwise, you will get the error as you have seen right there. Now, we're not gonna talk about that in this class because it's gonna be a lot of set up, and I just want to show you an overview of classes. But please be aware that there are some features of classes that have not been officially adopted yet, and if you come across them, you are going to need some sort of babble plug in so that it could work. But the good news for us right now is that we can still use static methods on, and they do a pretty good job of what we need. All right, so let's stop right here in the next video. We are going to talk about using classes two or more classes together using the extends keyword. So let's take a break and I will see you in the next video by. 5. Extends and Super Keywords: Hello. I am Stephen. My you and you're watching the best Js dot com. Okay, In the last video, we talked about static class methods, their methods that don't belong to an instance but belong to the class itself. And we talked about static properties, which is an unofficial feature of ES six. And in order to use something like that, you need to use a babble plug in in order to make it work. We're not gonna go over that in this video course, but I just want you to be aware of it. And in some projects that use reacted reduction, they use static properties, and you might come across that in some tutorials and videos. Just know it's not officially adopted yet, but I hope they are in the future because there are quite nice and I really like them. All right. In this video, we're gonna talk about using multiple classes together and and kind of combining theme properties and methods from one class into another, using the extends keyword. So I got a blank file right here, and I'm just gonna copy and paste what we have from the last video because we are gonna build upon it, okay? And I'm going to just give us some space right here, and I'm going to create a new class. So above, we have our person class as a couple of static methods, a constructor method and if a few instance methods. So now let's create a new class, and this class will be a worker. Okay? It's gonna be very similar to our person class except through the has job is gonna be true . All right, so let's get started. This will be class worker extends person. Okay, Now what does this mean? Extends. We haven't seen that yet. We have class person here, but this is class. Worker extends person. Now a worker is a person. Think about it. All people hold employees of company old workers, office worker, farm workers, doctors, nurses, lawyers, software developers, believe it or not, their whole people and, uh, and all workers or people. But but not all people are working or have jobs. I think of it like that. So a worker is gonna have a first name and a last name. They're gonna have these kind of methods right here, too, as well as some additional properties now, worker has a lot in common with the person class. And instead of instead of copying everything doing the same like initialization in the constructor and so on and so forth, that would not be very efficient. That would not be very dry. You've seen programming. We should be very dry. Don't repeat yourself so we can use the extends keyword, and we will inherit properties and methods from the person class. So think of extends Meaning inherit person is our ancestor. And we're going to inherit everything inside of here and essentially do like a copy and paste so we can borrow properties and methods. We can also override anything that we borrow this well, So we're going to do another constructor method and we're gonna have first name, last name and a jump. That's a little different. And I'm gonna call a special method super first name and last name. So when you call super inside of a method inside of any method, that means it's gonna call the method from the class it extends from Okay, so here we're calling super inside of the constructor method, which means it's going to call the constructor method off the person. Class C here is super. It's inside of her worker constructor. But we're going to call. But super is gonna call the constructor method of a person class because we are extending from person. So all of this initialization is gonna happen right here, so we'll be able to set her first name or last name. And that has job is false. Well, this is a worker. So has job has to be true. But that's okay. We can override that. You say this dot job his job, and this duct has job equals. Truth said. Now we have overridden the initialized property and the person constructor, and we just over overrode it ourselves and just said true. Okay, So again, we are getting all the same properties and methods from the person class. We're doing our own initialization here. First, we're gonna call the constructor method of the person class. That's what super does. And then we're gonna do some additional initialization of around. We're gonna create a job property, and then we're gonna override false appear with True and let's just right one mawr property set job job, this dumb job skills job. All right, very good. Let's copy this over. Sure. Terminal pace that in there? Great. So I say, const worker one equals new worker. All right, Steven my you and software developer. Okay, Looking good. Worker one. Now look at that. We've got a first main as job is true. Jobs, software, device developer and last name is my You okay? Awesome. Now we did not set this dot first name and this dot last name and the worker constructor, but we called super. And then that invoked the constructor method of the person class. And then we got this stuff first name in the stopped last name with the arguments that we passed the class and then we also got has job is false. Then back down here. After we called super, we set this stuff job to whatever we gave the class. And then we overrode the as job property that we got from person. And we said that the truth and, well, this worker one, it could get all of the same methods from her person class. If we call worker one full name and invoke it, it still works. So instead of copying and pasting all this stuff, we can use extends to borrow all the properties and old methods from another class. And if you wanted to, we can even write another class which extends from the worker class and that new class. It would get everything from worker and everything from person to, which is pretty cool. Okay, so that is the extends keyword. It allows us to be able Teoh to borrow the properties and methods from another class. And if we want to call the super method, uh, well, we can we can use the super method, and it will call the method of the same name from the class we are extending from. So I could even, you know, have a full name class in here. And I can call super just like that. And well, it would call it would find the person class, cause we're extending from it. And it would invoke the method by the same name just like that. All right, great. We did a lot of good work in this video, so let's stop here. And in the next video, we're gonna talk about getter methods getters. They get something. What does that mean? Well, let's take a break and I'll explain it to you in the next video. But by for now, 6. Getter Methods: Hello. I am Stephen. My, you and you're watching the best J s dot com. Okay, In the last video, we talked about the extends keyword A swell. It's the super method. And we can use both of these to inherit the properties and methods from another class. So that way we can keep our cloak or code very dry so that we don't repeat ourselves in this video. We're gonna talk about getter methods. So I'm gonna go ahead, open up my new file and just copy and paste everything from the previous video. All right, so I'm gonna add another method in here in my worker class. Let me just give us some breathing room right here. And this is gonna be called biography biography way. Invoke it with no functions. And let's create a variable constant bio short for biography. And we're gonna write this string template, and this will be this Got full name is the this'll. Oops. Forgot to put this problem is ah, this dumb job. And then we'll just make it all uppercase to upper case just like that and we will return the bio. All right, that looks good. Copy this over browser. Alright, that's looking good. So let's create new worker cons. Worker one. So new workers. Stephen my you and software developer. All right, so this is looking good. So were her one. And let's call the biography method Sent what? I called it biography. Yes. So in order to get that string, well, it is a method, so I have to invoke it, and I have to use the pair of parentheses to invoke it. Okay. And sure enough, it works. Stephen, you is a software developer now. What if What if I wanted to not invoke it? In other words, what if I just wanted to I don't know. Just do it like this and treat it like a property instead. Well, it would work. I mean, I wouldn't get in the errors, but I wouldn't get the that wouldn't get, you know, the expected output that I would want. You know, I just get a copy of the function. Well, this is possible. Okay? We can weaken, basically convert our methods and to something like a property. Okay. And this is called a get method. And it's very easy to do. You just put the git keyword in front of it. And so now this method kind of behaves like a property now, So let's refresh the page. Okay? Lets copy and paste this new code in here and command k to get rid of that cops worker. So if I say worker one, the biography. And so now you see right here I didn't invoke it. I just got rid of the parentheses. It just looks like a regular property. And now it works, which is pretty darn cool. So get keyword basically makes a method behave like a property. And so that's what I did before I used to get keyword. I had to use my parentheses like this, in which invoke it. But once I added to get keyword, that was no longer necessary, and it just kind of behaves like a property. So a couple of videos ago when we were talking about static methods. Okay, I told you that a static method that it was available right now, but static properties were not available for for classes unless you used a babble plug in. Because static properties have not been officially adopted into E s six, it's one of those stage zero or stage one features that are still undergoing consideration . Well, you could do the same thing for a static method as well. You can go buying static and the get keyword together. So, uh, you might remember we have worker and species game there ago and that this will also work for person, Okay? Because we extend it from person, and it borrows all of the same static methods, instance, methods and properties. But now I can use a gift method, like, right here. Okay, save that. We'll refresh. Well paced it. So now we just made this into a static get method. Yeah. Now, let's say a person that species almost Avians and we didn't even do the same thing right here. Species, almost SAPIENs. And before you were called, that was the methods that we had to invoke it. But this is one way to kind of get around that. Okay, now it's still spits. It's still technically a method. It's still a function, but we don't have to invoke it with a pair of parentheses, and it kind of looks and behaves as a property, which is a nice little future already. So I'm gonna get rid of the get keyword right here. I'm going to keep the get keyword down over here aren't so where we have one more video in this series. We've done quite a lot of work. And you might guess that if we did getters get methods in this video that the next video is gonna be centers. Did you guess it? Well, you're right. And the next and final video of this course, we're going to talk about center methods, and they're really cool. I can't wait to show you. So let's take a break. And in the next video, I'll show you the final piece of information that you need to know in order to really understand Java script classes. Okay, see, in the next video Goodbye. 7. Setter Methods: Hello. My name is Steven. My you and you're watching the best J s dot com and the last video. I showed you how to use getter methods and basically they are methods in disguise, their functions in disguise. They are truly functions. But whenever we use them in her code, they look like this regular properties. So if I wanted to get the biography, that biographical sentence, I don't have to invoke it in the console. I could just call dot biography with no parentheses, and then this function will run. And that's pretty cool. Okay, now, I mentioned that in the last video also that we could also have static getter methods and we just use them and combine them just like that. I forgot to mention that if you're gonna use static, get methods well, down here below in this other static method, I have this dot species. But But now that it's a getter, I don't need this parentheses anymore. Okay, So if you if you have the get method right here in the first static method species method of person, just be sure to go toe line seven and the species sentence and this pair of parentheses. We don't need it anymore. Just remove it because we're using the get keyword, and we access it without the parentheses. So it's a function in disguise. It looks like a property because it doesn't have those parentheses. Look, no parentheses, but it is running or invoking a function. Okay, so I just wanted to point that out And in the last video, Okay, we're going to go over centre methods, So these air getters, they retrieve a value and setters Well, you've guessed it. They re set a value. All right, so let's go ahead and do that. I'm just gonna save this change, and I'm gonna copy all this and then come over here to the last file. Okay? Great. So we have everything that we've had before gay or static methods. Okay. And, uh, we changed this to it get and all of the stuff that we've been working with, All right, so I'm looking at her code, and I'm examining everything in the worker class. It looks good, but I noticed something kind of annoying in the person class you see in the person class. I can set the first name, and I can set the last name as well. But what if what if I wanted to set them both at the same time? Well, the way that we have it now, I would have to call set first name and then call set. Last name. All right, so to demonstrate that game or copy that Well, this refresh this. Refresh this in there. That looks good. And if I say const person one? Okay, there we go. So if I wanted to change Stephen my you to Steve Meyer, Well, I would have to call both of those methods. So person one that set first name Steve and then person one set, last name Meyer can. Let's check that it works. Main Steve Meyer. Now they're works as expected, but that's a little bit of, you know, kind of an annoyance to me that I have to call set first name and then set last name in order to reset the full name. OK, I don't like doing that. So I think this is a good use case for a center method. So enough talking. Let's go into her console and right of center method. Okay, so we have a center method right here. See, we have a couple of instance methods, but let's write a set method right below last name. So this will be set. Gave the SEC keyword. Here we use get right here will be set the full name. It's gonna take one argument, just the name, and we're gonna take the name. The name is gonna be a string, Okay? And we're gonna split it into an array name, not split. We're gonna split on the space, okay? And then we are going to call the first name and the last name ended from appear. So this dot set first name that would be named groups. A big name bracket zero. Remember, this is an array now, so we have two elements. The first element should be the first name. This Stott set blessing. Now let's take a look at that. We're gonna copy this over. Come true. Eternal paste it. Okay, great. Now let's say const person, one new person. Awesome. So before, if I wanted to do the set first name, it was a function. So I had to do something like this. But we are using a center method now, so watch this. Okay, we're gonna call folding for its a person once set. Full name. Hey, something somewhat. I called it. Oh, sorry. We just called it full name, my bad. And instead of invoking it, I'm just gonna reassign like it's a regular property. Steve, Fire. Okay. And look at that. Now, if I call person one first, name it. Steve Person. One last name. Meyer Person one. A full name. Okay, so I made a mistake right here. So if I said person, one full name that is coming back undefined. Now, this is a good learning, sort of, Ah, learning situation for you. Right here. So full name. Okay, we've got full name up here and the full name down here, so that's a naming collision. And it's not recognizing it's not recognizing this, Okay? Telling us it's not a function. All right, so we should probably rename this so that we don't get that error. All right, let's do that one more time. Set Full name. Hey, come back over here. Sometimes we make mistakes, but that's okay. That's how we learn. All right, So we're gonna try this one more time. Const. Person One. Okay, look. Good. And So I'm gonna say person one dot set full name. That will be We'll see Billy Jackson Justice Set it all up. So now we'll say person wind up pulling Billy Jackson. Okay, so my van right there, I had a center that was the same name as another instance method. So that is a no, no. Okey dokey. So there you have it. In case you're wondering. Yes, you can have a static set method if you want you belonging to a class instead of this already. So very nice job, everybody. We're gonna wrap up in the final video. But this is all that I wanted to show you about. JavaScript classes and the documentation that you find on the Indian website. Well, it could be a little scary and intimidating. There's a lot of examples and kind of, you know, uh, confusing jargon. But really, it's not as bad as it seems. We use classes to create objects, and that's it. And the new ES six classes. They have tons of features that were not available and the old function constructors. So if I had a choice between this and this, well, I would choose the classes. Okay, Dokey. Let's stop right here and I'll say some final words and the next video. But by