Loading Please Wait...

Logo Lynxsia IT Solutions

JavaScript Classes

JS Classes

JavaScript Classes are templates for JavaScript Objects. Classes were introduced in ES6.

JavaScript Class Syntax

Use the keyword class to create a class. It is a good practice to always add a method named constructor().

					 
        
          class ClassName {
            constructor() { ... }
          }
        
      

The class has two initial properties: "name" and "year". A JavaScript class is not an object. It is a template for JavaScript objects.

Using a Class

When you have a class, you can use the class to create objects.

					 
        
          const myCar1 = new Car("Ford", 2014);
          const myCar2 = new Car("Audi", 2019);
        
      
The Constructor Method

The constructor method is a special method:

  • It has to have the exact name "constructor"
  • It is executed automatically when a new object is created
  • It is used to initialize object properties

If you do not define a constructor method, JavaScript will add an empty constructor method.

Class Methods

Class methods are created with the same syntax as object methods.

Use the keyword class to create a class.

Always add a constructor() method.

Then add any number of methods.

Syntax
					 
        
          class ClassName {
            constructor() { ... }
            method_1() { ... }
            method_2() { ... }
            method_3() { ... }
          }
        
      
Example
					 
        
          class Car {
            constructor(name, year) {
              this.name = name;
              this.year = year;
            }
            age() {
              const date = new Date();
              return date.getFullYear() - this.year;
            }
          }

          const myCar = new Car("Ford", 2014);
          document.getElementById("demo").innerHTML =
          "My car is " + myCar.age() + " years old.";
        
      
Parameters To Class Methods
					 
        
          class Car {
            constructor(name, year) {
              this.name = name;
              this.year = year;
            }
            age(x) {
              return x - this.year;
            }
          }

          const date = new Date();
          let year = date.getFullYear();

          const myCar = new Car("Ford", 2014);
          document.getElementById("demo").innerHTML=
          "My car is " + myCar.age(year) + " years old.";
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved