How to Insert Arrow Symbols on Your Web Page Turn to Unicode for all kinds of symbols

JavaScript Classes

In JavaScript, classes are the special type of functions. We can define the class just like function declarations and function expressions.

The JavaScript class contains various class members within a body including methods or constructor. The class is executed in strict mode. So, the code containing the silent error or mistake throws an error.

The class syntax contains two components:

• Class declarations
• Class expressions

Class Declarations

A class can be defined by using a class declaration. A class keyword is used to declare a class with any particular name. According to JavaScript naming conventions, the name of the class always starts with an uppercase letter.

Class Declarations Example

Let's see a simple example of declaring the class.

1. <script>  
2. //Declaring class  
3. class Employee  
4.   {  
5. //Initializing an object  
6.     constructor(id,name)  
7.     {  
8.       this.id=id;  
9.       this.name=name;  
10.     }  
11. //Declaring method  
12.     detail()  
13.     {  
14.   document.writeln(this.id+" "+this.name+"<br>")  
15.     }  
16.   }  
17. //passing object to a variable   
18. var e1=new Employee(101,"Martin Roy");  
19. var e2=new Employee(102,"Duke William");  
20. e1.detail(); //calling method  
21. e2.detail();  
22. </script>  

Test it Now

Output:

101 Martin Roy
102 Duke William

Class Declarations Example: Hoisting

Unlike function declaration, the class declaration is not a part of JavaScript hoisting. So, it is required to declare the class before invoking it.

Let's see an example.

1. <script>  
2. //Here, we are invoking the class before declaring it.  
3. var e1=new Employee(101,"Martin Roy");  
4. var e2=new Employee(102,"Duke William");  
5. e1.detail(); //calling method  
6. e2.detail();  
7.   
8. //Declaring class  
9. class Employee  
10.   {  
11. //Initializing an object  
12.     constructor(id,name)  
13.     {  
14.       this.id=id;  
15.       this.name=name;  
16.     }  
17.     detail()  
18.     {  
19.   document.writeln(this.id+" "+this.name+"<br>")  
20.     }  
21.   }  
22. </script>  

Test it Now

Output:

Class Declarations Example: Re-declaring Class

A class can be declared once only. If we try to declare class more than one time, it throws an error.

Let's see an example.

1. <script>  
2. //Declaring class  
3. class Employee  
4.   {  
5. //Initializing an object  
6.     constructor(id,name)  
7.     {  
8.       this.id=id;  
9.       this.name=name;  
10.     }  
11.     detail()  
12.     {  
13.   document.writeln(this.id+" "+this.name+"<br>")  
14.     }  
15.   }  
16. //passing object to a variable   
17. var e1=new Employee(101,"Martin Roy");  
18. var e2=new Employee(102,"Duke William");  
19. e1.detail(); //calling method  
20. e2.detail();  
21. //Re-declaring class  
22. class Employee  
23.   {  
24.   }  
25. </script>  

Test it Now

Output:

---

Class expressions

Another way to define a class is by using a class expression. Here, it is not mandatory to assign the name of the class. So, the class expression can be named or unnamed. The class expression allows us to fetch the class name. However, this will not be possible with class declaration.

Unnamed Class Expression

The class can be expressed without assigning any name to it.

Let's see an example.

1. <script>  
2. var emp = class {  
3.   constructor(id, name) {  
4.     this.id = id;  
5.     this.name = name;  
6.   }  
7. };  
8. document.writeln(emp.name);  
9. </script>  

Test it Now

Output:

emp

Class Expression Example: Re-declaring Class

Unlike class declaration, the class expression allows us to re-declare the same class. So, if we try to declare the class more than one time, it throws an error.

1. <script>  
2. //Declaring class  
3. var emp=class   
4.   {  
5. //Initializing an object  
6.     constructor(id,name)  
7.     {  
8.       this.id=id;  
9.       this.name=name;  
10.     }  
11. //Declaring method      
12. detail()  
13.     {  
14.   document.writeln(this.id+" "+this.name+"<br>")  
15.     }  
16.   }  
17. //passing object to a variable   
18. var e1=new emp(101,"Martin Roy");  
19. var e2=new emp(102,"Duke William");  
20. e1.detail(); //calling method  
21. e2.detail();  
22.   
23. //Re-declaring class  
24. var emp=class   
25.   {  
26. //Initializing an object  
27.     constructor(id,name)  
28.     {  
29.       this.id=id;  
30.       this.name=name;  
31.     }  
32.     detail()  
33.     {  
34.   document.writeln(this.id+" "+this.name+"<br>")  
35.     }  
36.   }  
37. //passing object to a variable   
38. var e1=new emp(103,"James Bella");  
39. var e2=new emp(104,"Nick Johnson");  
40. e1.detail(); //calling method  
41. e2.detail();  
42. </script>  

Test it Now

Output:

101 Martin Roy
102 Duke William
103 James Bella
104 Nick Johnson

Named Class Expression Example

We can express the class with the particular name. Here, the scope of the class name is up to the class body. The class is retrieved using class.name property.

1. <script>  
2. var emp = class Employee {  
3.   constructor(id, name) {  
4.     this.id = id;  
5.     this.name = name;  
6.   }  
7. };  
8. document.writeln(emp.name);  
9. /*document.writeln(Employee.name);  
10. Error occurs on console:  
11. "ReferenceError: Employee is not defined  
12. */  
13. </script>  

Test it Now

Output:

Employee

← PrevNext →