In JavaScript, classes represent a distinct category of functions. We can establish a class in a manner similar to function declarations and function expressions.
The JavaScript class encompasses several class members within its body, which may include methods and constructors. This class operates in strict mode. Consequently, any code that includes a silent error or mistake will result in an error being thrown.
The syntax for classes comprises two key elements:
- Class declarations
- Class expressions
Class Declarations
A class can be established through a class declaration. The keyword class is utilized to declare a class with a specified name. In alignment with JavaScript naming conventions, the class name must always begin with a capital letter.
Class Declarations Example
Let’s examine a straightforward illustration of how to declare a class.
<script>
//Declaring class
class Employee
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
//Declaring method
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
//passing object to a variable
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail(); //calling method
e2.detail();
</script>
Output:
101 Martin Roy
102 Duke William
Class Declarations Example: Hoisting
In contrast to function declarations, class declarations in JavaScript are not subjected to hoisting. Consequently, it is necessary to define the class prior to attempting to use it.
Let's see an example.
<script>
//Here, we are invoking the class before declaring it.
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail(); //calling method
e2.detail();
//Declaring class
class Employee
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
</script>
Output:
Class Declarations Example: Re-declaring Class
A class can only be defined a single time. Attempting to define the same class multiple times will result in an error being thrown.
Let's see an example.
<script>
//Declaring class
class Employee
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
//passing object to a variable
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail(); //calling method
e2.detail();
//Re-declaring class
class Employee
{
}
</script>
Output:
Class expressions
An alternative method for defining a class is through the use of a class expression. In this case, it is not necessary to provide a name for the class. Therefore, the class expression can either have a name or remain anonymous. This form of class expression enables us to retrieve the class name, a feature that is not achievable with a class declaration.
Unnamed Class Expression
It is possible to define a class without giving it a specific name.
Let's see an example.
<script>
var emp = class {
constructor(id, name) {
this.id = id;
this.name = name;
}
};
document.writeln(emp.name);
</script>
Output:
Class Expression Example: Re-declaring Class
In contrast to class declarations, class expressions provide the flexibility to redefine the same class. Therefore, if an attempt is made to declare the class multiple times, it results in an error being thrown.
<script>
//Declaring class
var emp=class
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
//Declaring method
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
//passing object to a variable
var e1=new emp(101,"Martin Roy");
var e2=new emp(102,"Duke William");
e1.detail(); //calling method
e2.detail();
//Re-declaring class
var emp=class
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
//passing object to a variable
var e1=new emp(103,"James Bella");
var e2=new emp(104,"Nick Johnson");
e1.detail(); //calling method
e2.detail();
</script>
Output:
101 Martin Roy
102 Duke William
103 James Bella
104 Nick Johnson
Named Class Expression Example
The class can be defined with a specific identifier. In this context, the accessibility of the class name extends only within the confines of the class body. The class can be accessed through the class.name attribute.
<script>
var emp = class Employee {
constructor(id, name) {
this.id = id;
this.name = name;
}
};
document.writeln(emp.name);
/*document.writeln(Employee.name);
Error occurs on console:
"ReferenceError: Employee is not defined
*/
</script>
Output:
Employee