JavaScript Class

by

According to Wikipedia: In object-oriented programming, a class is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).

A class in Javascript is a special type of function that contains various class members including methods or constructors.

A class in JavaScript can be defined in the following ways:

  • Class declarations
  • Class expressions

JavaScript Class Declarations

Declaring a class means defining a class using the name of the class. The name of the class always starts with an uppercase letter.

Syntax:

class className


class TestClass {
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}


JavaScript Class Declarations Example:


<!DOCTYPE html>
<html>
<body>
<script>
class Student
{
constructor(id,name)
{
this.id=id;
this.name=name;
}
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
var s1=new Student(1,"Diana Rey");
var s2=new Student(2,"Tagore William");
s1.detail();
s2.detail();
</script>
</body>
</html>


Note: A class can not be re-defined by declaring an approach. i.e. We can not re-declare a class. The following code will give a throwing error.


<!DOCTYPE html>
<html>
<body>
<script>
class Student
{
constructor(id,name)
{
this.id=id;
this.name=name;
}
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
class Student
{
}
var s1=new Student(1,"Diana Rey");
var s2=new Student(2,"Tagore William");
s1.detail();
s2.detail();
</script>
</body>
</html>


JavaScript Class expressions


Class expressions means defining a class using a class expression. The name of the class is not mandatory in this case.


Syntax:


var variableName = class


JavaScript Unnamed Class Expression Example:


<!DOCTYPE html>
<html>
<body>
<script>
var student = class {
constructor(id,name)
{
this.id=id;
this.name=name;
}
}
document.writeln(student.name);
</script>
</body>
</html>


JavaScript Class Expression Example:


<!DOCTYPE html>
<html>
<body>
<script>
var student=class
{
constructor(id,name)
{
this.id=id;
this.name=name;
}
showDetail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
var stu1=new student(1,"Pooja Dagar");
var stu2=new student(2,"Rupali Sharma");
stu1.showDetail();
stu2.showDetail();
</script>
</body>
</html>


Note: We can redefine a class-by-expression approach. i.e. We can re-declare a class. The following code will execute successfully.


<!DOCTYPE html>
<html>
<body>
<script>
var student=class
{
constructor(id,name)
{
this.id=id;
this.name=name;
}
showDetail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
var stu1=new student(1,"Pooja Dagar");
var stu2=new student(2,"Rupali Sharma");
stu1.showDetail();
stu2.showDetail();
//Re define the student class
var student=class
{
constructor(id,name)
{
this.id=id;
this.name=name;
}
showDetail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
var stu1=new student(1,"Shivanshu");
var stu2=new student(2,"Navdeep");
stu1.showDetail();
stu2.showDetail();
</script>
</body>
</html>