/    /  Javascript-Class

Javascript-Class

 

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

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

 

Syntax:

 

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

 

Example:

 

class bike{
 constructor(name, year) {
  this.name = name;
  this.year = year;
 }
}

 

two components:

 

  • Class declarations
  • Class expressions

 

Class Declarations:

 

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

 

Example:

 

<!DOCTYPE html>
<html>
<body>

<script>
//Declaring class
class Employee
 {
//Initializing an object
   constructor(id,name)
   {
    this.id=id;
    this.name=name;
   }
//Declaring method
  detail()
  {
 document.writeln(this.id+" "+this.name+"<br>")
  }
  }
//passing object to a variable
var e1=new Employee(101,"student one");
var e2=new Employee(102,"student two");
e1.detail(); //calling method
e2.detail();
</script>

</body>
</html>

 

OUTPUT:

 

101 student one

102 student two

 

Class expressions:

 

It is not mandatory to assign the name of the class. So, The class expression can be named / unnamed. The class expression provides us to fetch the class name. However, this will not be possible with the class declaration.

 

Unnamed Class Expression:

 

without assigning any name to it.

 

<!DOCTYPE html>
<html>
<body>

<script>
var emp = class {
 constructor(id, name) {
  this.id = id;
  this.name = name;
 }
};
document.writeln(emp.name);
</script>

</body>
</html>

 

OUTPUT:

 

emp

 

Re-declaring Class:

 

re-declare the same class.

 

<!DOCTYPE html>
<html>
<body>

<script>
//Declaring class
var emp=class
 {
//Initializing an object
   constructor(id,name)
   {
    this.id=id;
    this.name=name;
   }
//Declaring method   
detail()
  {
 document.writeln(this.id+" "+this.name+"<br>")
  }
}
//passing object to a variable
var e1=new emp(101,"student1");
var e2=new emp(102,"student2");
e1.detail(); //calling method
e2.detail();

//Re-declaring class
var emp=class
 {
//Initializing an object
   constructor(id,name)
   {
    this.id=id;
    this.name=name;
   }
detail()
  {
 document.writeln(this.id+" "+this.name+"<br>")
  }
}
//passing object to a variable
var e1=new emp(103,"student3");
var e2=new emp(104,"student4");
e1.detail(); //calling method
e2.detail();
</script>

</body>
</html>

 

OUTPUT:

 

101 student1

102 student2

103 student3

104 student4

 

Named Class Expression Example:

 

<!DOCTYPE html>
<html>
<body>

<script>
var emp = class Employee {
 constructor(id, name) {
  this.id = id;
  this.name = name;
 }
};
document.writeln(emp.name);
/*document.writeln(Employee.name);
Error occurs on console:
"ReferenceError: Employee is not defined
*/
</script>

</body>
</html>

 

OUTPUT:

 

Employee

 

Class Methods:

 

The same syntax as object methods.

  • Use the keyword class to create a class.
  • Always add a constructor() method.

 

Syntax:

 

class ClassName {
 constructor() { ... }
 method_1() { ... }
 method_2() { ... }
 method_3() { ... }
}
}

 

Example:

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Class Method</h2>

<p>How to define and use a Class method.</p>

<p id="i2"></p>

<script>
class bike {
 constructor(name, year) {
  this.name = name;
  this.year = year;

 }
 age() {
  let date = new Date();
  return date.getFullYear() - this.year;
 }
}

let mybike = new bike("Ford", 2015);
document.getElementById("i2").innerHTML =
"My bike is " + mybike.age() + " years old.";
</script>

</body>
</html>

 

OUTPUT:

 

JavaScript Class Method

How to define and use a Class method.

 

My bike is 6 years old.