22 Class

Class means a blue print for creating objects. Basically each class has two things properties & methods

• Class is the heart of Object Oriented Paradigm (OOPs)
• The keyword class needs to be used.
• Class name is always starts with capital letter E.g Car not car
• Class was introduced in ES6 and we didn't have it in ES5

1. Real World Example

Let's say we have a class of car.

• The properties can be - name, manufacturer, model number etc.
• The methods can be start(), stop(), refill() etc.

The Class

Let's say we have class Car in Car.js file.

export class Car {

    //Properties
    name;
    manufacturer;
    purchaseyear;

    //Constructor
    constructor(name, manufacturer, purchaseyear) {
        this.name = name;
        this.purchaseyear = purchaseyear;
        this.manufacturer = manufacturer;
    }

    //Methods
    start() {
        console.log(`${this.name} car is started`);
    }

    stop() {
        console.log(`${this.name} car is stopped`);
    }

    refill() {
        console.log("Refill the fuel");
    }

    service() {
        console.log(`Please send the car to ${this.manufacturer}`)
    }

    old() {
        const old = new Date().getFullYear() - this.purchaseyear;
        console.log(`The car is ${old} years old`);
    }
}

The Client

Let's say we have another file showroom.js that's calling Car class.

import {Car} from "./Car.js";

const car = new Car("Aventador","Lamborghini", "2014");
car.start();
car.refill();
car.stop();
car.old();
car.service();


const car1 = new Car("Aspire","Ford","2020");
car1.start();
car1.refill();
car1.stop();
car1.old();
car1.service();

2. The Constructor

• It has to have the exact name "constructor"
• It is executed automatically when a new object is created
• It is used to initialize object properties
• If we do not define a constructor method, JavaScript will add an empty constructor method.

3. Static Methods Variables

Static members are created at the class level and initialized only once. It doesn't matter how many objects we create out of the class.

class employee{
    
    static companyLocation;

    constructor(name){
        this.name= name;
    }

    static companyName(){
        console.log("Google.co");
        this.companyLocation = "125 Park Avenue";
    }
}

employee.companyName();
console.log(employee.companyLocation); 

4. Function as Class (ES5)

Class was introduced in ES6 and in ES5 the functionality was available in function.

• The below implementation still works in ES6

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}

export function app(){
  var person1 = new Person('John', 30);
  person1.greet(); // outputs "Hello, my name is John and I'm 30 years old."
}

Another example

function foo() {
  this.value = 'Hello, world';

  this.bar = function() {
      //alert(this.value);
      console.log(this.value);
  }
}

var inst = new foo();
inst.bar();