Classes in JavaScript

Classes in JavaScript requires grasping their role in object-oriented programming (OOP). JavaScript classes offer a streamlined way to create objects and manage inheritance, enabling developers to write clearer, more maintainable code.

  • What is Class ?
  • A class in JavaScript is essentially a blueprint for creating objects with specific properties and methods. It provides a clear and organized way to define objects, making the code more readable and maintainable.

  • Class Declaration :
  • A class is declared using the class keyword followed by the class name. The class body is enclosed in curly braces {}.
    class Person {
    // Class body
    }

  • Constructor Method :
  • The constructor method is a special method used for initializing new objects. It is called automatically when a new instance of the class is created. This method is where you define the initial state (properties) of the object.
    class Person {
    constructor(name, age) {
    this.name = name;
    this.age = age;
    }
    }

  • Using a Class :
  • To create an instance(object) of a class, you can use the new keyword.
    const Person = new Person('PBA',20);

  • Class Method :
  • In JavaScript, class methods are functions that are defined within a class and can be called on instances of that class.
    class Person{
    constructor()
    {
      //code
    }
    method()
    {
      //code
    }
    }

  • Examples :
  • JavaScript code
    # Write a program with the following specifications:
    Class name : Rectangle Data members/Instant Variable : int length, int breadth. Member functions :   void inputdata(): to accept length and breadth of the rectangle. void calculate() : to find area , perimeter and diagonal of the rectangle. void outputdata(): to print the results. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> var length=0,breadth=0; var a,p,d; class rectangle { inputdata() { length=parseInt(prompt("Enter the no")); breadth=parseInt(prompt("Enter the no")); } calculate() { a=length*breadth; p=2*(length+breadth); d=Math.sqrt(length*length+breadth*breadth); } outputdata() { document.write("area="+a+"<br>"); document.write("perimeter="+p+"<br>"); document.write("diagonal="+d+"<br>"); } } ob= new rectangle(); ob.inputdata(); ob.calculate(); ob.outputdata(); </script> </body> </html>

    Output : Enter the no : 5
    Enter the no : 5
    area=25
    perimeter=20
    diagonal=7.0710678118654755

    JavaScript code
    # Write a program with the following specifications:
    Class name : prime Member functions : void inputdata(): to accept the number. void calculate() : to calculate no is prime or not . void outputdata(): to print the result <!DOCTYPE html> <html> <head> <title>prime</title> <meta charset="utf-8"> </head> <body><script type="text/javascript"> var n,i,c=0; class prime { inputdata() { n=parseInt(prompt("enter the no")); } calculate() { for(i=1;i<=n;i++) { if(n%i==0) { c++; } } } outputdata() { if(c==2) document.write("prime"); else document.write("not prime"); } } ob = new prime(); ob.inputdata(); ob.calculate(); ob.outputdata(); </script> </body> </html>

    Output : enter the no : 5
    prime
    enter the no : 4
    not prime

    JavaScript code
    # Write a program with the following specifications:
    Class name : Palindrome Member functions : void inputdata(): to accept the number. void calculate() : to calculate no is palindrome or not . void outputdata(): to print the results. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body><script type="text/javascript"> var n,t,s=0; var r; class prime { inputdata() { n=parseInt(prompt("enter the no")); t=n; } calculate() { while(n>0) { r=parseInt(n%10); s=s*10+r; n=parseInt(n/10); } } outputdata() { if(s==t) document.write("palindrome"); else document.write("not palindrome"); } } ob = new prime(); ob.inputdata(); ob.calculate(); ob.outputdata(); </script> </body> </html>

    Output : enter the no : 121
    palindrome
    enter the no : 120
    not palindrome

  • Conclusion :
  • Classes in JavaScript provide a more intuitive and structured way to handle objects and inheritance compared to the traditional prototype-based approach. They simplify the creation and management of objects, support encapsulation, and promote code reuse through inheritance. Understanding and effectively utilizing classes can lead to more maintainable and scalable JavaScript applications.