In 2015, the ES6 version of the JavaScript programming language was released. This release introduced some major upgrades to the language, and officially placed it in the category of object-oriented programming language among other languages such as Java and C++.
Object-oriented programming focuses on objects and the operations that can be performed on them. However, before you can have any objects you’ll need to have a class.
JavaScript classes are one of the game-changing features that came with the ES6 version of the language. A class can be described as a blueprint that is used to create objects.
In this tutorial article, you’ll learn how to create and manipulate objects using JavaScript classes.
JavaScript Class Structure
When creating a class in JavaScript there’s one fundamental component that you’ll always require—the class keyword. Almost every other aspect of the JavaScript class isn’t required for its successful execution.
A JavaScript class will execute naturally if a constructor is not provided (the class will simply create an empty constructor during execution). However, if a JavaScript class is created with constructors and other functions but no class keyword is used, this class will not be executable.
The class keyword (which should always be in lowercase) is a necessity in JavaScript’s class structure. The following example is the general syntax of a JavaScript class. The JavaScript class syntax is below:
class ClassName{
//class body
}
Creating a Class in JavaScript
In programming, a class can be seen as a generalized entity that is used to create a specialized object. For example, in a school environment, a generalized entity (a class) can be students and an object of students can be John Brown. But before you create an object you'll need to know the data that it will store and this is where JavaScript Constructors comes into play.
Using Constructors in JavaScript Classes
A constructor is vital to the class creation process because of a few reasons; it initializes the state of an object (through its attributes) and it is called automatically when a new object is instantiated (defined and created).
Using a Constructor Example
Below, you'll see a constructor example with an explanation of what it means.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}
The code above presents an important aspect of the JavaScript class constructor; unlike other languages such as Java and C++, a JavaScript’s constructer doesn’t use the class name to create a constructer. It uses the constructor keyword as you can see in the example above.
The constructor in the example above takes three parameters and uses the this keyword to assign the parameters to the current instance of the class. It might seem a bit confusing, but what you need to understand is that a class can be seen as a blueprint that is used to create many houses.
Each constructed house can then be seen as an object of this class. Though each of these houses is created with the same blueprint, they’re distinguishable by their specific geographical location or the people who own them.
The this keyword is used to distinguish each object created by a class. It ensures that the correct data is stored and processed for each object that is created using the same class.
Creating an Object in JavaScript
Constructors are important in a language like JavaScript because they signify the number of attributes an object of a specific class should have. Some languages will require that an attribute (variable) be declared before it can be used in a constructor or any other methods. However, this is not the case with JavaScript.
Looking at the student class constructor above, you can discern that an object of this class will have three attributes.
Creating an Object Example
Below, you'll see an example for creating an object in JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
The code above uses the Student class to create an object.
When creating an object of a class, you need to use the new keyword, followed by the class name and the values that you want to assign to the respective attributes. Now you have a new student with the first name John, the last name Brown, and a start date of 2018. You also have a constant variable: john. This variable is important because it allows you to use the object that is created.
Without the john variable you'll still be able to create a new object using the Student class, but then there'll be no way of accessing this object and using it with the different methods of the class.
Using Methods in JavaScript Classes
A method is a function of a class that is used to perform operations on objects that are created from the class. A good method to add to the student class is one that generates a report on each student.
Creating Class Methods Example
Below is an example for creating class methods in JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}
The class above contains a method that will generate a report on each student created with the Student class. To use the report() method you will need to use an existing object of the class to make a simple function call.
Thanks to the “create an object example” above, you should have an object of the Student class that is assigned to the variable john. Using john, you can now successfully call the report() method.
Using Class Methods Example
Below is an example of using class methods in JavaScript.
//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);
The code above uses the Students class to produce the following output in the console:
John Brown started attending this institution in 2018
Using Static Methods in JavaScript Classes
Static methods are unique because they are the only methods in a JavaScript class that can be used without an object.
From the example above, you can’t use the report() method without an object of the class. This is because the report() method relies on the attributes of an object to produce a desirable result. However, to use a static method, you'll only need the name of the class that stores the method.
Creating a Static Method Example
Below is a static method example for JavaScript.
class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}
The important thing to note from the example above is that every static method begins with the static keyword.
Using a Static Method Example
Below is an example for using a static method in JavaScript.
//calling a static method and printing its result to the console
console.log(Student.endDate(2018));
The line of code above uses the Students class to produce the following output in the console:
2022
Creating a JavaScript Class is Easy
There are several things you need to remember if you want to create a JavaScript class and instantiate one or more objects from it:
- A JavaScript class must have the class keyword.
- A JavaScript constructor indicates the number of values an object can have.
- General class methods can’t be utilized without an object.
- Static methods can be used without an object.
The console.log() method is used throughout this article to provide the results of using both the general and static methods in a JavaScript class. This method is a useful tool for any JavaScript developer as it helps in the debugging process.
Familiarizing yourself with the console.log() method is one of the most important things you can do as a JavaScript developer.