Classes in JavaScript

Classes are the well-known concept in object oriented programming. Programmer those working on C++, Java etc are aware of what is Class and what we can achieve using Classes.With ECMAScript 2015 version JavaScript also introduced Classes.

According to MDN -

"JavaScript classes introduced in ECMAScript 2015 are syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance."

let's go bit deeper and learn how Classes works in JavaScript.

• JavaScript classes introduced in ECMAScript 2015.
• To declare a class, you use the class keyword with the name of the class.
• JavaScript does not have classes, the way that Java and other languages have classes.
• JavaScript's class is (mostly) just syntactical sugar for prototypes, which are very different from traditional classes.
• A distinctive feature of classes is the function called the constructor. This is where you initialize your object's properties.
• You don't have to define a constructor function. If you choose not to, the engine will insert an empty one for you.
• In JavaScript, there is two way to define the class.

Class declarations: Use the class keyword and give class name.

     class Rectangle{

         constructor(height, width) {

         this.height = height;

         this.width = width;

       }

    }

Class expressions: class expression can be named or unnamed in JavaScript.

     // unnamed

     var Rectangle = class {

     constructor(height, width) {

      this.height = height;

      this.width = width;

    }

  };



      // named

     var Rectangle = class Rectangle {

     constructor(height, width) {

     this.height = height;

     this.width = width;

    }

   };

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not.

    //Example

    var p = new Rectangle(); // ReferenceError

    class Rectangle {}

The constructor method is a special method for creating and initializing an object created with a class. A constructor can use the super keyword to call the constructor of a parent class.

Prototype methods: 

Here is the example to create prototype method in JavaScript

      class Rectangle {

         constructor(height, width) {

         this.height = height;

         this.width = width;

      }

       get area() {
          return this.calcArea();
       }

      calcArea() {
        return this.height * this.width;
     }
   }
    const square = new Rectangle(10, 10);
    console.log(square.area);

Static methods: 

• The static keyword defines a static method for a class.
• Static methods are called without instantiating their class and cannot be called through a class instance. 
• Static methods are often used to create utility functions for an application.Below is the example to create static method in JavaScript.

      class Point {
          constructor(x, y) {
          this.x = x;
          this.y = y;
       }

        static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
      }
    }

        const p1 = new Point(5, 5);
        const p2 = new Point(10, 10);
        console.log(Point.distance(p1, p2));

ES6 is finalized, but not fully supported by all browsers (e.g., ES6 Firefox support). To use ES6 today, get a compiler like Babel.For more information and examples on ES6 classes, take a look at this link MDN:CLASSES.

Happy Learning :-)