Class In JavaScript/Ecmascript 6

Class In EcmaScript

In JavaScript classes are function. Latest version JavaScript added class keyword in JavaScript or ECMAScript but if you see internally it uses a function itself.

ECMA Script 2015 it introduces a concept of class and it is a syntactical sugar over JavaScript existing prototype-based inheritance. Class added means it does not introduce object-oriented inheritance model in JavaScript.

Class is a special function like function declaration and function expression.

Function declaration in JavaScript

  1. defines a function with the specified parameters.
function calcRectArea(width, height) {
  return width * height;
}

Syntax

function name([param[, param,[..., param]]]) {
   [statements]
}

Function expression in JavaScript

The function keyword can be used to define a function inside an expression.

var getRectArea = function(width, height) {
    return width * height;
}

Class In EcmaScript and JavaScript

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Class expressions

It is another way to defined a class . it is named or unnamed. The whatever the name given to named class expression is local to class’s body

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"

Class body and method definitions

The body of a class is the part that is in curly brackets {}. This is where you define class members, such as methods or constructor.

Constructor Section

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name “constructor” in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method.

A constructor can use the super keyword to call the constructor of the superclass.

Static methods

The static keyword is used to define a static method for class and it is called without initializing the object by using class name . method name you can call the method.

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.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.distance; //undefined
p2.distance; //undefined

console.log(Point.distance(p1, p2)); // 7.0710678118654755
class Student
{

constructor(StudentID,Marks,Name)
{
    this.StudentID=StudentID;
    this.Marks=Marks;
    this.Name=Name;
}

getDetails(){
    return this.Name+" -- "+this.StudentID+" -- "+this.Marks;
}

}

var v=new Student(1,100,"Sagar Jaybhay");
console.log(v.getDetails())

the above class can write it as

function Student(StudentID,Marks,Name)
{
    this.StudentID=StudentID;
   this.Marks=Marks;
    this.Name=Name;

this.getDetails=function()
    {
             return this.Name+" -- "+this.StudentID+" -- "+this.Marks;
    }
}
var v=new Student(1,100,"Sagar Jaybhay");
console.log(v.getDetails())

function Student(){  // Class

this.StudentName="";
this.StudentID="";

this.Submit=function(){
    console.log("This is submit method "+this.StudentName+" "+this.StudentID );
} // this is function

}

var stud=new Student(); // this is object
stud.StudentName="Sagar Jaybhay"; // properties
stud.StudentID=101;// properties
stud.Submit(); // method call

In the above code, the studentName and StudentID are just variable they are not properties means you can set anything to it and no validation their.

To create a set and get method for student name and studentid first we need to create private variables and then we need set and get method but in JavaScript there is no set and get method so we need to create a function for that.

function Student(){  // Class

var _StudentName="";
var _StudentID="";

this.Submit=function(){
    console.log("This is submit method "+this.getStudentName()+" "+this.getStudentID() );
} // this is function

this.setStudentName=function(value)
{
_StudentName=value;
}
this.getStudentName=function(){
return _StudentName;
}
this.setStudentID=function(value)
{
_StudentID=value;
}
this.getStudentID=function(){
return _StudentID;
}
}

var stud=new Student(); // this is object
stud.setStudentName("Sagar Jaybhay"); // properties
stud.setStudentID(101);// properties
stud.Submit(); // method call

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *