7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 The Class

ECMAScript 2015 introduces the class construct to the language. It’s nothing more than synctatic sugar for the data type pattern we saw in the last lesson, but that sugar is sooo sweet!

Related Links

3.3 The Class

In the previous lesson, we created a new data type called person. And we created a few person objects. But one of the things we didn't do is actually verify that those person objects are well, person objects. They aren't just an Normal objects that we have gotten from using a factory function. So we can verify that by using the instance of operators. So obj instanceof Person of course is going to be true, because these objects were created as an instance of person. Now at the end of the previous lesson, I had mentioned that a lot of developers had gotten a way of writing code like this for a variety of different reasons. But one of those is because it's rather cumbersome, and I make no bones about my bias. I personally still write data types if it makes sense to do so, but I can fully understand the reasoning behind wanting a better way of defining data types in JavaScript. Because this is cumbersome, and it's also disjointed. So with ECMAScript 2015 we now have a different syntax for defining data types, and it's a class. Now, it's funny that even though it's been finalized that we do have a class in ECMAScript 2015, a lot of developers are still upset about that. But like it or not, we have classes. So we can use them to essentially do the same thing that we did in the previous lesson, but we can do so in a much nicer way. So whenever you want to define the class you start with the class keyword, followed by the name of the class. So we are going to replicate our person data type. So we're going to say class Person, and then we have a pair of curly braces. And then everything inside of these curly braces are part of this person class. So the first thing we want to do is define our constructor. Now with the old way of creating a data type, we created a constructor function and that essentially defined the data type itself. In a class, our constructor is simply called constructor, there's not a function keyword or anything like that, it is simply constructor. And then the parameters that we want to accept, so we have firstName and then we have lastName. And then the inside of the constructor we essentially do the same thing that we did in the older constructor. We assign all of the properties and we initialize the object however we need to. So let's just copy and paste those two lines of code. So we have created the firstName and the lastName properties. But then we need the greet's method. So we just define that method. And we do so without the function keyword, we just say greet() followed by a pair of parentheses. And the greet method actually accepts an argument called name. So you have the name of the method, the parameter list and then the your pair of curly braces. And then of course everything inside of the curly braces are part of that method. So we can just cut and paste that code, and we're done. We have essentially recreated the same person data type, but we did so with much better syntax. Now I have said that the class in ES 2015 is syntactic sugar for defining a constructor function, putting methods on the prototype and all of that stuff and that is exactly the case. Behind the scenes, we end up with the same exact code that we had in the previous lesson. So if we look, we have a function called Person. It has a prototype property and on that prototype is greet. So it's the same exact thing. It's just nicer to type. Now also in the previous lesson, we looked at incorporating privacy into our person data type, and we are going to do the same thing in this lesson. We are going to convert our person data type into a class and it is going to have private values for the firstName and lastName. However, we are going to do so as a module. Since we are going to be working with ES 2015 features, we might as well just go all out and incorporate more things. And this is really something that we will do in the future. We will have individual components inside of modules and we will load them into our application and use them however we need to. But the only thing is, a lot of the features in the ES2015 aren't supported in the browsers. Like for example, classes are not supported by any browser. Now there might be a nightly build of Firefox that supports classes. But there's nothing else as far as a browser is concerned that allows us to use classes. So instead we have to use a transpiler and there are many transpilers. There's TypeScript, Babel, Traceur and a variety of others. In this lesson we are going to use Babel because it has the best support for all of ES 2015s features. And we are also going to use a component called ES6 module loader, and we will use this in order to load our private person module. Now I am going to include all of the necessary files in the code download. However, if you want to get these files for yourself you're going to have to install a couple of note packages. The first is called a bable-core. That will give you everything that you need in order to use Babel in the browser. In fact the file for that is called the browserjs. I'm using the minified version so that's browser min js. And then the second node module is es6-module-loader. So you will need to install those packages. You'll need to get the files, and then put them wherever you want to put them. Now as you can see here, there is some setup that we have to go through. This is for es6-module-loader. We have to tell it to what transpiler that we want to use, and we also have to set the path for Babel. And then it is going to automatically pull in Babel so that we don't have to reference that JavaScript file here in the HTML. So we have to set system.paths.babel to whatever file contains babel. And then we need to set the system.transpiler option to babel, so that it knows to use babel to trends pile are ES 2015 code into JavaScript. Now, let's close this person js because we're done with and that's going to the private person. This is where we are going to define our person class. It's also where we are going to export that person class so that we can then import it inside of our index HTML file. So let's first of all get rid of the immediately invoked function and the global Person variable. We won't need that anymore, so we'll just get rid of all of that. Now, we do still need the firstName symbol and the lastName symbol because that is how we are going to implement privacy in this class. And we will eventually get rid of all of this extra code, but we will leave this for now. And we'll just start to writing our class. So once again, we want class Person and then a pair of curly braces. We want our constructor where we are going to accept the firstName and lastName. And then we are going to set our private fields to those values. So let's just copy the code from our old constructor and put them into the new constructor. And now we can get rid of our person constructor. So we have our private fields. The next thing we need is our greets method. So we will do what we did just a few minutes ago. We will define greet, we will have the name parameter and then we will simply have the code that we had before. So let's just cut that, let's paste it into the new greet method and then we will delete the old greet method. Now for the properties, we had firstName and lastName properties and they had just a getter. There was no setter there. So the syntax for doing that inside of a class is to use a get and then the name of the property firstName(). But this is essential a going to be a function. And it is going to return the value of our private field, so let's just copy that coat, pasted in. And there we have our firstName property. So the only difference between a getter property and a method is the get in front of the property name. Now if you want to define a setter, you do the same thing. Set firstName(), and then you have the value that you want to set. So if we wanted to set the firstName, we could say sets firstName and then (value) and then we could set our private field to be that value, but we don't want that. We want our firstName to be protected, so let's get rid of that setter. And then we just need a getter for the lastName. So we can copy the code that we have for firstName and then change it to lastName. So there we have our lastName property, and it is returning the value of our lastName private field. So we can get rid of the definition for our firstName and lastName properties from the old code. And then finally, we have this renamePerson static function or static method rather. And we can define this inside of our class with the static keyword. So we say static and then the name of our method. So renamePerson. We have our two parameters. We have the person object that we want to rename and then the last name. And then we essentially have the same code from the old renamePerson static method. So now that we've gotten rid of all of the old code. We can look at what we have for our class. We can see that it is much cleaner. In fact, I would say that this is a huge improvement over the code that we had before. Well let's get rid of all of this extra code at the bottom of the file, and we want to export our class. So that whenever we import the module we have the class to work. So we use exports before class because that is what we're going to export. If we had other things that we were going to export, then we would have other export statements. But we only have one thing, so we just have export class Person, and don't worry about these red squigleys that you see on the screen Visual Studio just doesn't realize that this is the syntax for exporting an ES 2015 module. So now we need to go over to the index HTML file, and we want to import that module. So we are going to use a script tag. The type is going to be set to module. And then we want to import that person class from the private person file. So the syntax to do that is import followed by a pair of curly braces and inside of these braces are the things that we want to import. We want to import Person, and we need to say where that is coming from. So we have from and then the name of our file, "private-person". Now we should be able to omit the extension, however I think we are going to get a 404. I'm not sure if there's an option that we need to set for the module loader component, but as I was preparing for this lesson I had to do the extension. So we will just say, private-person.js. And now we have our person class so we can say, let's use complete es 2015 syntax. So we will have let and then person = new Person, let's give this person a name of ("John", "Doe");. And then we will alert (person.greet and our John Doe person is going to greet somebody named ("Jim"). So let's run this. Let me right click here, and we're going to load this in Microsoft Edge. So ooh, shiny and there we have the result. Hello, Jim. My name is John. So classes give us a better syntax for defining data types in JavaScript. You can say what you want about classes, but there's no denying that what we just saw is infinitely better than the old code that we had to write.

Back to the top