What is a class in OOPs ?
A Class is defined as the template which is used to create objects or methods which is used for common purpose.
What is a class in Javascript ?
In Javascript, a class is defined as a special type of function.
Javascript class contains various class members like methods and constructors inside the class body.
The body of the class is always executed in strict mode to increase the performance.
Since class is executed in strict mode, if there is any errors it will be caught and thrown as an error.
Class syntax is divided into two components.
1. Class Declaration
2. Class Expressions
1. Class Declaration
Syntax :
<script>
class ClassName{
}
</script>
Rules to be followed :
1. Class can be declared using Javascript reserved keyword “class”.
2. Class name always starts with the uppercase.
Javascript class declaration can be explained in three different ways.
1. Normal declaration of class
2. Invoking class before declaring it.
3. Redeclaring the same class
Complete javascript tutorial !!!
Click to Learn More about – Javascript online learning
1. Normal declaration of class
This is the normal/correct way of declaring the javascript class.
Code Example :
<script>
class GetEmployeeInfo{
constructor(name,age,qualification,address)
{
this.name = name;
this.age = age;
this.qualification = qualification;
this.address = address;
}
printOutput(){
document.writeln("Employee Info <br/><br/>");
document.writeln("Name = " + this.name+"<br/>");
document.writeln("Age = " + this.age + "<br/>");
document.writeln("Qualification = " + this.qualification+ "<br/>");
document.writeln("Address = " + this.address+"<br/><br/>");
}
}
var employee1 = new GetEmployeeInfo("Abdul","87","ME","Chennai");
employee1.printOutput();
var employee2 = new GetEmployeeInfo("Gandhi","69","BE","Delhi");
employee2.printOutput();
var employee3 = new GetEmployeeInfo("Sunil","34","BE","Pune");
employee3.printOutput();
</script>
Output :
2. Invoking class before declaring it.
Suppose if we invoke the class before declaring it, javascript throws error.
Since there is no reference for the class it throws “Reference Error for the class”
Code Example :
<script>
var employee1 = new GetEmployeeInfo("Abdul","87","ME","Chennai");
employee1.printOutput();
var employee2 = new GetEmployeeInfo("Gandhi","69","BE","Delhi");
employee2.printOutput();
var employee3 = new GetEmployeeInfo("Sunil","34","BE","Pune");
employee3.printOutput();
class GetEmployeeInfo{
constructor(name,age,qualification,address)
{
this.name = name;
this.age = age;
this.qualification = qualification;
this.address = address;
}
printOutput(){
document.writeln("Employee Info <br/><br/>");
document.writeln("Name = " + this.name+"<br/>");
document.writeln("Age = " + this.age + "<br/>");
document.writeln("Qualification = " + this.qualification+ "<br/>");
document.writeln("Address = " + this.address+"<br/><br/>");
}
}
</script>
Output :
3. Redeclaring the same class
Suppose if we redeclare a same class again inside the javascript code.
It throws error like “ClassName has already been declared”.
Code Example :
<script>
class GetEmployeeInfo{
constructor(name,age,qualification,address)
{
this.name = name;
this.age = age;
this.qualification = qualification;
this.address = address;
}
printOutput(){
document.writeln("Employee Info <br/><br/>");
document.writeln("Name = " + this.name+"<br/>");
document.writeln("Age = " + this.age + "<br/>");
document.writeln("Qualification = " + this.qualification+ "<br/>");
document.writeln("Address = " + this.address+"<br/><br/>");
}
}
var employee1 = new GetEmployeeInfo("Abdul","87","ME","Chennai");
employee1.printOutput();
var employee2 = new GetEmployeeInfo("Gandhi","69","BE","Delhi");
employee2.printOutput();
var employee3 = new GetEmployeeInfo("Sunil","34","BE","Pune");
employee3.printOutput();
class GetEmployeeInfo{
}
</script>
Output :
2. Class Expressions
This is another way for declaring the class using class expression.
We can name the class or the class remains unnamed, since naming the class is not mandatory.
This class expression fetches the name of the class.
This can be explained in two ways
1. Named class expression.
2. UnNames class expression.
3. Redeclaring the same class name.
1. Named class expression.
We can define the class name and expression fetches the class name
Code Example :
<script>
var emp = class GetEmployeeInfo{
constructor(name,age,qualification,address)
{
this.name = "Abdul";
this.age = age;
this.qualification = qualification;
this.address = address;
}
}
document.writeln("Name = " + emp.name+"<br/>");
</script>
Output :
2. UnNamed class expression
Here the class Name is not defined but the expressionn fetches the variable name assigned for that class.
Code Example :
<script>
var emp = class{
constructor(name,age,qualification,address)
{
this.name = "Abdul";
this.age = age;
this.qualification = qualification;
this.address = address;
}
}
document.writeln("Name = " + emp.name+"<br/>");
</script>
Output :
3. Redeclaring the same class name.
Here, Class expression allows us to re-declare the same class.
Code Example :
<script>
var emp = class GetEmployeeInfo{
constructor(name,age,qualification,address)
{
this.name = name;
this.age = age;
this.qualification = qualification;
this.address = address;
}
printOutput(){
document.writeln("Employee Info <br/><br/>");
document.writeln("Name = " + this.name+"<br/>");
document.writeln("Age = " + this.age + "<br/>");
document.writeln("Qualification = " + this.qualification+ "<br/>");
document.writeln("Address = " + this.address+"<br/><br/>");
}
}
var employee1 = new emp("Abdul","87","ME","Chennai");
employee1.printOutput();
var employee2 = new emp("Gandhi","69","BE","Delhi");
employee2.printOutput();
var employee3 = new emp("Sunil","34","BE","Pune");
employee3.printOutput();
var emp = class GetEmployeeInfo{
constructor(name,age,qualification,address)
{
this.name = name;
this.age = age;
this.qualification = qualification;
this.address = address;
}
printOutput(){
document.writeln("Employee Info <br/><br/>");
document.writeln("Name = " + this.name+"<br/>");
document.writeln("Age = " + this.age + "<br/>");
document.writeln("Qualification = " + this.qualification+ "<br/>");
document.writeln("Address = " + this.address+"<br/><br/>");
}
}
var employee1 = new emp("Arjun","71","Msc","Chennai");
employee1.printOutput();
var employee2 = new emp("Bala","69","BE","Mumbai");
employee2.printOutput();
var employee3 = new emp("David","34","ME","Pune");
employee3.printOutput();
</script>
Output :
