OOP Concepts with Javascript ES5, ES6 - Part 1

Definition 

Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create objects based on the real world entities.

Main OOP Concepts

• Encapsulation
• It's the process of combining data and functions into a single unit called class
• Abstraction
• It's the concept of exposing the relevant details of an object to the outside world while keeping the unnecessary details of an object hidden to the outside world.
• Inheritance
• It's like using the structure and behaviour of a super class in a subclass.
• Polymorphism 
• In polymorphism what we do is, we change the structure and behavior of the parents class from child class. There are two ways to achieve this.
• Overriding - Dynamic binding / Run-Time binding / Late binding (Different class)
• Overloading - Static binding / Compile time binding / Early binding (Same Class)

Encapsulation

Private Properties

All properties of an object are public. you can make variables private easily by declaring them inside the constructor.

function Person(name,age,ssn){

this.name = name;

this.age  =  age;

 //making social_security_no variable private

var social_security_no = ssn;

// 2324352212 this works since we are acccessing it inside the function

console.log(social_security_no)

}

var person = new Person("Ajith",24,"2324352212");

console.log(person.name); //Ajith

console.log(person.age); //24

console.log(person.social_security_no); //undefined

//let's use the prototype object to access ssn

Person.prototype.getSSN = () => {

return this.social_security_no;

}

console.log(person.getSSN()); //undefined

Getters and Setters

Getters and Setters are used to set and get private variables defined inside a function in javascript. There are few ways to create getters and setters in javascript. Most ways are deprecated after ES5.

Modern Approach( ECMA ^5.1)

function Circle(){

//private radius

var _radius = 0;

}

//Getters and Setters

Circle.prototype = {

set setRadius(radius){

_radius = radius;

},

get getRadius(){

return _radius;

},

get getArea(){

return Math.PI * _radius * _radius;

}

};

var circ = new Circle();

circ.setRadius = 10;
// undefined , can't access a private variable.

console.log(circ._radius);

console.log(circ.getArea.toFixed(2)); //314.16

circ.setRadius = 100;

console.log(circ.getArea.toFixed(2)); //31415.93

Modern Approach 2 (ECMA 5.0)

function Circle(){

var radius = 0;

}

Object.defineProperty(Circle.prototype,"Radius",{

get: () => { 

return this.radius;

},

set : (radius) => {

this.radius = radius;

}

});

Object.defineProperty(Circle.prototype,"Area",{

get: () => { 

return this.radius * this.radius * Math.PI;

}

});

var circ =  new Circle();

circ.Radius = 10;

// undefined , can't access a private variable.

console.log(circ.radius);

console.log(circ.Area);

Deprecated Approaches

• Object.__defineGetter__(prop, func)
• Object.__defineGetter__.call(Circle.prototype,"getArea",function(){return area;});
• Object.__defineSetter__(prop, func)
• Object.__defineSetter__.class(Circle.prototype,"setRadius",function(radius){this.radius = radius;});

In a nutshell, encapsulation is the process of combining data and functions into a single unit called class. The function consists of private variables. Getters and Setters are used to get and set values for these private members. Look at the given image below.

Encapsulation

Let's Look at Inheritance in the next Tutorial