Javascript OOP concepts

In JavaScript, object-oriented programming (OOP) is a programming paradigm that uses objects and their interactions to design applications and computer programs. The main concepts of OOP in JavaScript are:

• Objects: An object is a collection of properties (variables) and methods (functions) that represent a real-world entity or concept. Objects can be created using object literals, constructors, or classes (in ECMAScript 6 and later versions).

   
  var emp = new Object();  
  emp.id = 101;  
  emp.name = "xyz";  
  emp.salary = 50000;  
  document.write(emp.id+" "+emp.name+" "+emp.salary);   
  

• Properties: Objects have properties, which are variables that store data. Properties can be accessed using the dot notation (object.property) or the square bracket notation (object[“property”]).
  

  const person = {
    fname:" John",
    lname:" Doe",
    age: 25
  };
  for (let x in person) {
    txt += person[x];
  }
  

• Methods: Objects have methods, which are functions that perform actions on the object’s properties. Methods can be invoked using the dot notation (object.method()) or the square bracket notation (object”method”).

   
  // creating an object
  let student = { };
  
  // adding a property
  student.name = 'John';
  
  // adding a method
  student.greet = function() {
      console.log('hello');
  }
  
  // accessing a method
  student.greet(); // hello
  

• Encapsulation: Encapsulation is the practice of keeping the object’s internal state and behavior hidden from the outside world, and exposing only a public interface for interacting with the object. This allows for greater control over the object’s behavior and can help prevent unintended changes to the object’s state.

   
  class Student {  
      constructor() {  
         var name;  
         var marks;  
      }  
      getName() {  
          return this.name;  
      }  
      setName(name) {  
          this.name=name;  
      }   
      getMarks() {  
          return this.marks;  
      }  
      setMarks(marks) {  
          this.marks=marks;  
      }  
  }  
  var stud=new Student();  
  stud.setName("John");  
  stud.setMarks(80);  
  document.writeln(stud.getName()+" "+stud.getMarks()); 
  

• Inheritance: Inheritance is the mechanism by which one object can inherit the properties and methods of another object. In JavaScript, inheritance can be implemented using the prototype chain.

   
  class Car {
    constructor(brand) {
      this.carname = brand;
    }
    present() {
      return 'I have a ' + this.carname;
    }
  }
  class Model extends Car {
    constructor(brand, mod) {
      super(brand);
      this.model = mod;
    }
    show() {
      return this.present() + ', it is a ' + this.model;
    }
  }
  let myCar = new Model("Ford", "Mustang");
  document.getElementById("demo").innerHTML = myCar.show();
  

• Polymorphism: Polymorphism is the ability of an object to take multiple forms. In JavaScript, polymorphism can be achieved by using the same method or property name in different objects, and having each one implement the behavior in a unique way.

   
  class firstClass {
      add() {
          console.log("First Method")
      }
  }
  class secondClass extends firstClass {
      add() {
          console.log(30 + 40);
      }
  }
  class thirdClass extends secondClass {
      add() {
          console.log("Last Method")
      }
  }
  var ob = new firstClass();
  var ob2 = new secondClass();
  var ob3 = new thirdClass();
  ob.add();
  ob2.add();
  ob3.add();
  

• Class: ECMAScript 6 and later versions of javascript introduced classes, this is a blueprint for creating objects (a specific data structure), defining initial values for state (member variables or properties), and executing behavior (member functions or methods).

   
  class Car {
    constructor(name, year) {
      this.name = name;
      this.year = year;
    }
    age() {
      let date = new Date();
      return date.getFullYear() - this.year;
    }
  }
  let myCar = new Car("Ford", 2014);
  document.getElementById("demo").innerHTML =
  "My car is " + myCar.age() + " years old.";