Is JavaScript Object has OOP features

Someday ago two of my colleagues discuss about JavaScript and OOP, keep silent I just listen there discussion, One person asked to another did he worked in JavaScript OOP? First person is confident that JavaScript is an OOP language. Second colleague is a wise person he tell him you may achieved OOP in JavaScript by typescript. After their discussion I decided to write something about JavaScript and OOP.

As we know Premature Optimization Is the Root of All Evil, before apply new technology need to learn what happened under the hood. My first colleague statement is half true and half false. To achieve OOP in JavaScript must have basic concept about JavaScript object, PROTOTYPE in JavaScript, closures. Simple this terms associated knowledge help us to understand how OOP in JavaScript.

First we discuss about JavaScript object. What is the object? Why we need it? Why it's called Object Oriented Programming?

We create software for people, actually for business unit. So it's very simple our application must contain entities and objects for whom the software is create. Suppose we are going to create a software for HOSPITAL. So application source code must contain the object of Patient, Doctor, Nurse, Hospital than it's easy to maintain, easy to give knowledge transfer to new people. This approach representing the object in program is termed as object oriented programming.

OOP main features are

• Abstraction     : - Show what is necessary
• Encapsulation   : - Hide Complexity
• Inheritance     : - Parent child relation
• Polymorphism  : - Depending on situation object has different behavior.

Rest of the article we discuss how to achieve OOP features in JavaScript. Fist we discuss about JavaScript Object. They are two types

• Literal (used for globally accessible)
• Constructor Function (used for multiple instance)

Literal way object creation

var employee = {

    "name": "joh",

    "company": "xyz"

};


                               

Constructor function way


function Employee() {

    this.Name = "joh";

    this.Company = "xyz";

};

var employee = new Employee();      

What the purpose of two type of object in JavaScript, may be below description help us to understand about Literal and Constructor Function object.

Instance create not possible in Literal approach and it's used for globally accessible

      var x=new employee(); //throw error. 

If need to create multiple instance than need the Constructor function approach

     var employee=new Employee();

     var PartimeEmp=new Employee();

Hope above discuss help us to understand about JavaScript object and its variations. Now we know why we create object. We also know how to create object for multiple instance with different state and also have knowledge about globally accessible object.

Now we discuss about PROTOTYPE in JavaScript, First we discuss about what is PROTOTYPE and what the relation PROTOTYPE with JavaScript is.

English word "PROTOTYPE" the way it's used in our day to day life like:

This Pen is based on that prototype model.

This Glass is based on that prototype model.  

It's clear that prototype means there is some kind of base, there is some kind of model you follow for create things. In object oriented programming this termed as inheritance it terms of there is some kind of parent base on it you create the child. Inheritance relation is parent child relation.

Inheritance                        base ==> child

JavaScript has keyword PROTOTYPE, it's an attachment process, Constructor function can use PROTOTYPE keyword for extend process.

//Attachment process

//Constructor Function model with property

function Car() {

    this.Manufacture = "XXX";

    this.Color = "Red";

    this.Price = "100$";

};

//object

var car = new Car();



//object attachment new function

car.Feature = function () { };

car.Mileage = function () { };

car.CarTypes = function () { };



//invoke functions.

car.Feature();

car.Mileage();



//Attachment process with Constructor Function approach.

//Constructor Function model with property and functions
function CarCrud() {

    this.Add = function () {

        alert(this.Price);

    };



    this.Update = function () {



    };



    this.Delete = function () {



    };

};


//object

var carCrud = new CarCrud();

//extend object

carCrud.prototy = new Car();



//Parent property

carCrud.Price = "500$";

//Current object function

carCrud.Add();

Now we can says that JavaScript is a Prototypical-language and its follow Prototypical-inheritance. In JavaScript how we manage state, for state management Closures come in picture, Declare a variable defined its scope, Confusion on variable scope have a look at. Suppose have one function which increase variable value.

function Counter() {

    var counter = 0;

    counter++;

    alert(counter);
}

For one of our requirement need to invoke Counter() method multiple times and also need to store variable(counter) values.

Counter();//first invoke// variable value::1
Counter();//second invoke// variable value::2
Counter();//third invoke// variable value::3

Simple requirement create a globally variable automatically get the desired output, is not it? But there is a problem in this approach. Global scope is smell because they are not self-contained. In modular programming they need to be self-contain and isolated then how we achieve our goal.

Closures can help us, though function in JavaScript is by default stateless but Closures Is a state full functions. They remember their private variable data after call.

 function Counter() {

    var counter = 0;  //create running memory ,call that stack.

    counter++;                         //increment the value in stack.

    alert(counter);  //display the value

};

Counter(); //output::1  //this method function state is different //than bellow one

Counter(); //output::1  //this method function state is different //than above  one

Closures solve this problem, is a isolated state full functions.

function Counter() {

    var counter = 0;  //create running memory ,call that stack.

    var _Increment = function{

        counter++;  //increment the value in stack.

        alert(counter);  //display the value 

    };

    return (Increment: _Increment)

};

var x = Counter();

x.Increment();  //output::1 //sate is same the bellow

x.Increment();  //output::2 //state is same the above.



var y = Counter();

y.Increment();  //output::1 //sate is different from the first instance.

Above discussion help us to clear concept about JavaScript object OOP, let sum up our discussion   

Abstraction         : - closures help to achieve.
Encapsulation       : - closures help to achieve.
Inheritance         : - Prototype object help to achieve.
Polymorphism        : - as JavaScript is a dynamic language,
by default its variable contain different type.