1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Introduction to JavaScript Classes

Introduction to JavaScript Classes

Contents

keyboard_tab
JavaScript Classes
Introduction to JavaScript Classes
Overview
Difficulty
Intermediate
Duration
6m
Students
17
Ratings
5/5
starstarstarstarstar
Description

This practical course explores JavaScript Classes, which were introduced with the inclusion of ES6 and are mostly syntactic sugar of constructor functions.

Learning Objectives

  • Learn how to create a class
  • Learn how to create a class method
  • Learn how to create a child class
  • Learn how about the class super method
  • Learn about child class inheritance

Intended Audience

This course is intended for anyone who wants to learn about JavaScript Classes.

Prerequisites

Anyone with an interest in learning how to use classes in JavaScript or who wants to improve their knowledge of JavaScript in general.

Transcript

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.

About the Author
Avatar
Farish Kashefinejad
Full-Stack Development Content Creator
Students
863
Labs
12
Courses
21
Learning Paths
2

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics