How Classes Work In JavaScript

This tutorial explains how to use class in Javascript. Like C++, java, php etc programming language, we can create class in javascript with very easy steps. A JavaScript class is a type of function. Classes are declared with the class keyword.
Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations. we will  discuss all one by one.

What is a constructor?

A constructor is a function object which is used to create and initializes the objects.

class Employee{
  constructor(name,age){
  this.name = name
  this.age = age
  }
}

Classes

Classes are also a special type of functions using prototype-based inheritance. we need to use class keyword to create class in javascript.

class Employee{
constructor(name,age){
  this.name = name
  this.age = age
}
}
const emp = new Employee('skptricks',34)
console.log(JSON.stringify(emp))
// { name : 'skptricks',age:34 }

NOTE: When the object is initialized, the constructor method is called, with any parameters passed.

Output:
------------------------

> "{"name":"skptricks","age":34}"

Methods in classes

In this example we have created getName function inside the employee class, this getName function fetch employee name.

class Employee{
constructor(name,age){
  this.name = name
  this.age = age
}

getName(){
  return this.name
}  

}
const emp = new Employee('skptricks',34)
console.log(JSON.stringify(emp))

//emp.getName()
console.log(emp.getName())

Output:
-------------------

> "{"name":"skptricks","age":34}"
> "skptricks"

CLASSES INHERITANCE

A class can extend another class, and objects initialized using that class inherit all the methods of both classes. If the inherited class has a method with the same name as one of the classes higher in the hierarchy, the closest method takes precedence:

/*
Class : Employee
*/
class Employee{
  
constructor(name,age){
  this.name = name
  this.age = age
}
  
getName(){
  return this.name
}  
  
}

/* 
class :ITEmployee
*/

class ITEmplyoee extends Employee {
  
  constructor(name, age, jobType){
   super(name, age); 
   this.jobType = jobType; 
  } 
  
  getName() {
    return 'Employee name is :-' + super.getName() + "\n" + "Job Type is :- " +  this.jobType
  }
}

const emp = new ITEmplyoee('skptricks',34,'IT')
console.log(emp.getName())

Output:
---------------------

> "Employee name is :-skptricks
Job Type is :- IT"

STATIC METHODS

We can also assign methods to the class function, not to its "prototype". Such methods are called static.

class Employee {
  static getName() {
    return 'Skptricks'
  }
}

Employee.getName() //Skptricks
console.log(Employee.getName())

Output:
----------------------

> "Skptricks"

GETTERS AND SETTERS

In this example,  we will see how to create getter and setter in javascript using class. You can add methods prefixed with get or set to create a getter and setter.

class Employee{
constructor(name,age){
  this.name = name
  this.age = age
}
  
 set name(value){
    this.name = value
 } 
 set age(value){
  this.age = value
 } 
  
 get name() {
    return this.name
 } 
 
 get age() {
    return this.age
 } 
  
  
}

Also you can create class structure using function as well. lets check out below example, where we have invoked a function with the new keyword it will return the empty object.

Example-1

function Employee(){
}
const emp = new Employee();
console.log(JSON.stringify(emp)) //  { }

Output:
---------------------------

> "{}"

Example-2 

function Employee(name,age){
  this.name = name
  this.age = age
}
const emp = new Employee('skptricks',34)
console.log(JSON.stringify(emp)) //  "{"name":"skptricks","age":34}"

Output:
---------------------------

> "{"name":"skptricks","age":34}"

This is all about class concept in javascript. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.