Javascript: Object Oriented Programming

What is Object Oriented Programming?

Object-oriented programming (OOP) refers to a programming in which programmers define the data type of a data structure, and also the types of operations (functions) that can be applied to the data structure.

In this way, the data structure becomes an object that includes both data and functions. In addition, programmers can create relationships between one object and another. For example, objects can inherit characteristics from other objects.

To understand OOP we need to learn basic concepts of OOP.

• Class: A category of objects. The class defines all the common properties of the different objects that belong to it.
• Abstraction: The process of picking out (abstracting) common features of objects and procedures.
• Encapsulation: The process of combining elements to create a new entity. A procedure is a type of encapsulation because it combines a series of computer instructions.
• Information hiding: The process of hiding details of an object or function. Information hiding is a powerful programming technique because it reduces complexity.
• Inheritance: a feature that represents the “is a” relationship between different classes.

Lets talk about Object Oriented Javascript

For that we need to understand basic concepts about OOP

1 Class: Classes are in fact “special functions”, and just as you can define function expressions and function declarations.

To declare a class, you use the class keyword with the name of the class (“Rectangle” here).

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

Prototype methods:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

2 Abstraction: Abstraction is a process whereby you hide implementation details from the developer and instead only provide the functionality

Advantages of Data Abstraction

• Helps the user to avoid writing low level code.
• Avoids code duplication and increases reusability.
• Can change internal implementation of class independently without affecting the user.
• Helps to increase security of an application or program as only important details are provided to the user.

Example:

class ImplementAbstraction {
  // method to set values of internal members
  set(x, y) {
    this.a = x;
    this.b = y;
  }

  display() {
    console.log('a = ' + this.a);
    console.log('b = ' + this.b);
  }
}

const obj = new ImplementAbstraction();
obj.set(10, 20);
obj.display();
// a = 10
// b = 20

3 Encapsulation: The JavaScript Encapsulation is a process of binding the data (i.e. variables) with the functions acting on that data. It allows us to control the data and validate it. To achieve an encapsulation in JavaScript: –

• Use var keyword to make data members private.
• Use setter methods to set the data and getter methods to get that data.

The encapsulation allows us to handle an object using the following properties:

Read/Write – Here, we use setter methods to write the data and getter methods read that data.

Read Only – In this case, we use getter methods only.

Write Only – In this case, we use setter methods only.

JavaScript Encapsulation Example

Let’s see a simple example of encapsulation that contains two data members with its setter and getter methods.

<script>  
  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());  
</script>  

4 Information Hiding: The information hiding principle enforces the design of objects to have at least two parts: a public part and a private one. Only the public part is accessible.

Example:

!function(window){ 
  var builder = 'Built with amazing closure awesomeness', 
  myCar; 
  function decorate(car){ 
    car.builder = builder; return car; 
  } 
  !function(){ 
    // well, not that much of a secret 
    var secret = 'They were pioneers!'; 
    myCar = decorate({ 
      make: 'Ford', 
      model: 'T', 
      getSecret: function(){ return secret; } 
    }); 
  }(); 
  window.car = myCar; 
}(window);

5 Inheritance: Inheritance allows methods from base class get copied into derived class.

In JavaScript, inheritance is supported by using prototype object which is different from classical inheritance.

function Person(firstName, lastName) {
    this.FirstName = firstName || "unknown";
    this.LastName = lastName || "unknown";            
}

Person.prototype.getFullName = function () {
    return this.FirstName + " " + this.LastName;
}
function Student(firstName, lastName, schoolName, grade)
{
    Person.call(this, firstName, lastName);

    this.SchoolName = schoolName || "unknown";
    this.Grade = grade || 0;
}
//Student.prototype = Person.prototype;
Student.prototype = new Person();
Student.prototype.constructor = Student;

var std = new Student("James","Bond", "XYZ", 10);
            
alert(std.getFullName()); // James Bond
alert(std instanceof Student); // true
alert(std instanceof Person); // true