Javascript complete tutorial for beginners

Classes in Javascript

Learn Simpli May 15, 2021 no Comments

Classes in Javascript

Introduction

Classes are a template for creating objects
They encapsulate data with code to work on that data
The class syntax has two components: class expressions and class declarations

Key points

Class declarations are not hoisted
Trying to access a class before declaring, gives a ReferenceError

Class declarations

One way to define a class is using a class declaration
To declare a class, you use the class keyword with the name of the class

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

Class expressions

We can also use class expressions to define our classes
The name given to a named class expression is the class name

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

Class body

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

It is a special method for creating of class
It initializes an object created with a class
the super keyword is used to call the constructor of the superclass

Methods

Methods can be added after the constructor method
Methods can be called with class instance

class Person{
constructor(name){
    this.name = name;
  } 
  
  getName(){
    return this.name;
  }
}

let john = new Person('John');\n
console.log(john.getName());\n
// John

Static methods and properties

The static keyword defines a static method of a class
Static methods are used to define fixed configuration
Static methods are called without instantiating their class
Cannot be called through a class instance

The static method with an instance

Calling a static method with instance gives an error
Error: john.getDepartment is not a function

class Person{
constructor(name){
    this.name = name;
  } 
  static department = 'Software';
  static getDepartment = () =>{
    return this.department;
  }
  getName(){
    return this.name;
  }
}

let john = new Person('John');
console.log(john.getName());
console.log(john.getDepartment());
// john.getDepartment is not a function

The static method with class name

A static method can be called with class name

class Person{
constructor(name){
    this.name = name;
  } 
  static department = 'Software';
  static getDepartment = () =>{
    return this.department;
  }
  getName(){
    return this.name;
  }
}

  let john = new Person('John');
  console.log(john.getName());
  console.log(Person.getDepartment());

//John
//Software

Public field declarations

Public fields can be defined at top of the class body
Public fields can be accessed from outside of a class

class Person{
salary = 8000;
constructor(name){
    this.name = name;
  }
}

let john = new Person('John');
console.log(john.salary);
// 8000

Private field declarations

Private fields can be defined at top of the class body
Private fields cannot be accessed from outside of a class

class Person{
#salary = 8000;
constructor(name){
    this.name = name;
  }
}

let john = new Person('John');
console.log(john.salary);
// undefined

Private field declarations

Private fields can be defined at top of the class body
Private fields cannot be accessed from outside of a class

class Person{
#salary = 8000;
constructor(name){
    this.name = name;
  }
}

let john = new Person('John');
console.log(john.salary);
// undefined

Creating subclass

The extends keyword is used to create a class as a child of another class
If there is a constructor present in the subclass, it needs to first call super() before using this

class Person{
salary = 8000;
constructor(name){
    this.name = name;
  }
  getSalary(){
    return this.salary;
  }
}

class Employee extends Person{
constructor(salary){
  super();
    this.salary = salary;
  }
  getSalary(){
    return this.salary;
  }
}

let john = new Person('John');
let stark = new Employee(6000);
console.log(john.getSalary());
console.log(stark.getSalary());
//8000
//6000

Superclass methods in the subclass

Superclass methods can be accessed with the keyword super

class Person{
salary = 8000;
constructor(name){
    this.name = name;
  }
  getSalary(){
    return this.salary;
  }
}

class Employee extends Person{
constructor(salary){
  super();
  }
  getSalary(){
  let sal = super.getSalary();
    return sal;
  }
}

let john = new Person('John');
let stark = new Employee(6000);
console.log(john.getSalary());
console.log(stark.getSalary());
//8000
//8000