Introduction to JavaScript classes. With the introduction of ES6, came JavaScript class syntax. Before I begin demonstrating in the ES6 class, I'm going to execute the console log below, demonstrating that the current state of the User constructor works. By executing and displaying the value of this method in the console, I'm going to rewrite the User constructor to an ES6 class.

I'm going to begin by commenting out the User constructor. To create a class, I need to begin with the class keyword. Class User, note that the User is capitalized, just like the constructor function above. Now, inside of the class, I need to invoke the constructor. The constructor will take two parameters, userName and email. I will initialize the class properties, this.userName=userName, and this.email=email. The class so far looks very similar in structure to the object constructor.

Now, there is a difference in how prototyping is handled. I will type userInfo, parentheses, curly brackets, return using a template string, Their username is ${this.userName} Class methods do not need the function keyword or an additional prototype declaration. Just like a prototype, any instance of the class will have access to this userInfo method. Now the User class is completed. And in theory, the console log that's below should work just as before. I will execute it, and the userInfo method I'll put is displayed at the console.

Now the User class is complete. What if I wanted to build other classes based on this User class, and pass on properties and class methods from this User class to these subclasses. I'm going to clean up this code a little bit and transition to another screen. On the screen, I now have just a User class, and I'm going to create an Admin class that will inherit from the User class. I will begin by typing class Admin extends User. The extends keyword indicates that the Admin class is a child class of the User class.

The child class will have access to the parents class properties and methods. The child class, just like the parent class is required to have a constructor. I will type constructor and give the constructor the parameters of userName and email, matching what's currently in the User class, but now I'm going to add an additional parameter named role, and I will give role a default value equal to admin, allowing for whenever an instance of the admin class is created. If no role value is provided, admin will be that value.

Now, before I initialized the role property, I need to invoke a special method called super inside of the constructor. Super, parentheses, userName and email. Super allows me to access the initialization of the User and email properties from the parent class. Super is always required in the constructor of a subclass, before initializing any subclass specific properties. Now that this is done, I can initialize the role property. So I will type this.role=role.

Now the Admin class is ready to use, I will create a adminUser, const adminUser=newAdmin with the following arguments, morganskye for the username and mskye@example.com for the email address. I'm not going to provide an argument for the role. Now I will console log adminUser and execute the console. To the right, there's an instance of the Admin class with values matching the arguments. Note that the role is present with a value of admin as set by the default.

Now, as mentioned earlier in the video, through inheritance, the Admin class has access to the properties and methods of the User class. So going back to the console log, I will attach the userInfo method to the adminUser and execute the console log again, and to the right, Their username is morganskye is being displayed. And that's it. Thanks for watching at Cloud Academy.