Object Oriented Programming | Javascript Hindi Course For Beginners ( 2023 ) #14

Object-Oriented Programming (OOP) is a programming paradigm that focuses on the use of objects to represent real-world concepts and entities.

Four principles of object-oriented programming

Encapsulation: Encapsulation refers to the process of hiding the internal details of an object from the outside world.Object’s state and behaviour are not accessible or modifiable by code outside of the object. This helps to ensure that the object's state remains consistent and that its behaviour is reliable, which can help to reduce errors and improve the maintainability of the code.

Abstraction: Abstraction involves simplifying complex systems by breaking them down into smaller, more manageable parts.

Inheritance: Inheritance is the mechanism by which one class can inherit properties and behaviours from another class. In OOP, inheritance is used to create new classes that are based on existing classes, thereby reducing code duplication and improving code reuse.

Polymorphism: Polymorphism allows objects of different classes to be treated as if they were of the same class.polymorphism is achieved through method overriding and method overloading.Method overriding involves creating a new implementation of a method in a subclass that overrides the implementation in the superclass. Method overloading involves creating multiple methods with the same name but different parameters, allowing the same method name to be used with different types of objects.

Constructor Function

Constructor function was old way of doing Oops (Object oriented programmings). Using this function we create object and using prototypes we assign different functionality to that object.


function Ticket(name, trainNo, trainName) {
  this.name = name;
  this.trainName = trainName;
  this.trainNo = trainNo;
  this.status = "Not Booked";
}

Proptype

the prototypeproperty is used to add properties and methods to an object constructor function. The prototype object is shared among all instances created using the constructor function.


function Ticket(name, trainNo, trainName) {
  this.name = name;
  this.trainName = trainName;
  this.trainNo = trainNo;
  this.status = "Not Booked";
}

Ticket.prototype.bookTicket = function bookTicket(amount, source, destination) {
  this.amount = amount;
  this.source = source;
  this.destination = destination;
  this.status = "booked";
  this.pnr = (Math.random() * 100000000).toFixed(0).toString();
};

Ticket.prototype.cancelTicket = function cancelTicket() {
  this.status = "cancelled";
};

Class

Classes were introduced in the ECMAScript 6 (ES6) version to provide a more structured and object-oriented approach to programming. A class in JavaScript is a blueprint for creating objects that encapsulate data and behaviour.


class Ticket {
  status = "Not Booked";

  constructor(name, trainNo, trainName) { // constructor is used to add values to 
   // property of class
    this.name = name;
    this.trainName = trainName;
    this.trainNo = trainNo;
  }

  bookTicket(amount, source, destination) { // this is works same as prop types
    this.amount = amount;
    this.source = source;
    this.destination = destination;
    this.status = "booked";
    this.pnr = (Math.random() * 100000000).toFixed(0).toString();
  }

  cancelTicket() { 
    this.status = "cancelled";
  }
}

Classes in JavaScript provide a convenient way to create objects with a consistent structure and behaviour. They also enable inheritance and polymorphism, which allows for more flexible and reusable code.

Inheritance

Inheritance is a fundamental concept in object-oriented programming that allows one class to inherit properties and methods from another class. In JavaScript, inheritance is implemented using prototype chaining.


class Ticket { // parent class
  status = "Not Booked";

  constructor(name, trainNo, trainName) {
    this.name = name;
    this.trainName = trainName;
    this.trainNo = trainNo;
  }

  bookTicket(amount, source, destination) {
    this.amount = amount;
    this.source = source;
    this.destination = destination;
    this.status = "booked";
    this.pnr = (Math.random() * 100000000).toFixed(0).toString();
  }

  cancelTicket() {
    this.status = "cancelled";
  }
}
// here we use extends to copy property from Ticket (parent class ) to 
// to TatkalTicket (child class)

class TatkalTicket extends Ticket { // children class
  fixedCharge = 150;
}

Encapsulation

Encapsulation refers to the process of hiding the internal details of an object from the outside world.Object’s state and behaviour are not accessible or modifiable by code outside of the object. This helps to ensure that the object's state remains consistent and that its behaviour is reliable, which can help to reduce errors and improve the maintainability of the code.


class Ticket {
  status = "Not Booked";

  constructor(name, trainNo, trainName) {
    this.name = name;
    this.trainName = trainName;
    this.trainNo = trainNo;
  }

  bookTicket(amount, source, destination) {
    this.amount = amount;
    this.source = source;
    this.destination = destination;
    this.status = "booked";
    this.pnr = (Math.random() * 100000000).toFixed(0).toString();
  }

  cancelTicket() {
    this.status = "cancelled";
  }
}

class TatkalTicket extends Ticket {
  #charge = 150; // # keyword is used to make field private

  #changeFixedByAdmin() {  
   // # keyword is used to make function private
// changeFixedByAdmin can be access only inside TatkalTicket class 
    this.#charge = 500;
  }

  get fixedCharge() {
   // getters used to get values from private fields 
    return this.#charge;
  }

  set fixedCharge(charge) {
  // setters used to set values of private fields 
 // we can also validate charge value to get perfect value
    if (typeof charge !== "number") {
      throw Error("Not a Number");
    }

    this.#changeFixedByAdmin();
  }
}

const anshuTatkalTicket = new TatkalTicket("Anshu", 15565, "Duranto Express");

anshuTatkalTicket.fixedCharge = 200; // here used setter to set values

console.log(anshuTatkalTicket.fixedCharge); // here we used getter to get value of charge

Polymorphism

Polymorphism allows objects of different classes to be treated as if they were of the same class.polymorphism is achieved through method overriding and method overloading.Method overriding involves creating a new implementation of a method in a subclass that overrides the implementation in the superclass. Method overloading involves creating multiple methods with the same name but different parameters, allowing the same method name to be used with different types of objects.


// overriding example
class Ticket {
  status = "Not Booked";

  constructor(name, trainNo, trainName) {
    this.name = name;
    this.trainName = trainName;
    this.trainNo = trainNo;
  }

  bookTicket(amount, source, destination) { // we are  overriding method
// inside TatkalTicket class (child class) -> replace exsiting method with new one with
// child class method
    this.amount = amount;
    this.source = source;
    this.destination = destination;
    this.status = "booked";
    this.pnr = (Math.random() * 100000000).toFixed(0).toString();
  }

  cancelTicket() {
    this.status = "cancelled";
  }
}

class TatkalTicket extends Ticket {
  #fixedCharge = 150;
 

  get fixedCharge() {
    return this.#fixedCharge;
  }

  bookTicket(amount, source, destination) {
  // we are overriding this method 
    super.bookTicket(amount, source, destination);
    this.amount += this.#fixedCharge;
   
  }

  set fixedCharge(charge) {
    if (typeof charge !== "number") {
      throw Error("Not a Number");
    }

    this.fixedCharge = charge;
  }
}


// overloading example 
class Ticket {
  status = "Not Booked";

  constructor(name, trainNo, trainName) {
    this.name = name;
    this.trainName = trainName;
    this.trainNo = trainNo;
  }

  bookTicket(amount, source, destination) { // overloading means passing more parameters
// to  method 
    this.amount = amount;
    this.source = source;
    this.destination = destination;
    this.status = "booked";
    this.pnr = (Math.random() * 100000000).toFixed(0).toString();
  }

  cancelTicket() {
    this.status = "cancelled";
  }
}

class TatkalTicket extends Ticket {
  #fixedCharge = 150;
  #isRefundable = true;

  get fixedCharge() {
    return this.#fixedCharge;
  }

  bookTicket(amount, source, destination, isRefundable) { 
  // here we are overriding method with
 // isRefundable extra parameter
    super.bookTicket(amount, source, destination);
    this.amount += this.#fixedCharge;
    this.#isRefundable === isRefundable;
  }

  set fixedCharge(charge) {
    if (typeof charge !== "number") {
      throw Error("Not a Number");
    }

    this.fixedCharge = charge;
  }
}

const anshuTatkalTicket = new TatkalTicket("Anshu", 15565, "Duranto Express");
const anshuTicket = new Ticket("Anshu Plain Ticket", 15565, "Duranto Express");

anshuTatkalTicket.bookTicket(500, "dhn", "rnc", false);
anshuTicket.bookTicket(500, "dhn", "rnc");
console.log(anshuTatkalTicket, anshuTicket);

A static method or property is one that belongs to the class itself, rather than to any particular instance of the class. This means that you can call a static method or access a static property directly on the class, without needing to create an instance of the class first.


class MyClass {
  static myStaticMethod() {
    console.log('This is a static method.');
  }

  static get MY_STATIC_PROPERTY() {
    return 'This is a static property.';
  }
}

MyClass.myStaticMethod(); // logs "This is a static method."
console.log(MyClass.MY_STATIC_PROPERTY); // logs "This is a static property."

Note that you cannot access static members on instances of the class:


const myInstance = new MyClass();
myInstance.myStaticMethod(); // throws an error
console.log(myInstance.MY_STATIC_PROPERTY); // logs "undefined"

"Object Oriented Programming | Javascript Hindi Course for Beginners (2023) #14" is a tutorial video that teaches the basics of OOP in Javascript, with a focus on encapsulation, inheritance, and polymorphism.

Complete Notes of JS - https://dosomecoding.com/courses/javascript/javascript-hindi-course-for-beginners

HTML Course
https://www.youtube.com/playlist?list=PLPppPPmk0i3gL2isb9Kr1GvTM8id2gdtY
CSS Course
https://www.youtube.com/playlist?list=PLPppPPmk0i3gWK5TVILnKSvuc9Fc15sbH
Html and CSS practice Projects
https://www.youtube.com/playlist?list=PLPppPPmk0i3hZCNmbVtcP1hlwDKOdUFX9
Javascript Course
https://www.youtube.com/playlist?list=PLPppPPmk0i3gZCY8JZ0H5oykFGevvNzNS

Linkedin - https://linkedin.com/in/anshuopinion
Telegram Channel - https://telegram.me/dosomecodinghelp
Instagram - https://instagram.com/dosomecoding
Github - https://github.com/anshuopinion