JavaScript - The four pillars of object oriented programming

Object oriented programming consists of four key concepts:

• Encapsulation
• Inheritance
• Abstraction
• Polymorphism

Before object-oriented programming we had procedural programming which divided a program into numerous functions. Basically, data was stored in variables and functions operated on that data. The problem occurs as the programs grow. This is when it becomes difficult to manage as the number of functions keep growing. This can lead to spaghetti code - due to inter-dependency between different pieces of code. To solve this problem, object-oriented programming was created.

object-oriented programming:
In this style of programming we combine a group of functions and variables into a single unit. This unit is called as an object. The variables contained in the object are called properties and functions are called methods.

variables == properties
functions == methods

Consider the example of Procedural Programming to convert the temperature units from Celsius to Fahrenheit.

let celsiusTemp = 36;
let multiplier = 9/5;
let adder = 32;

function getFahrenheit(celsiusTemp, multiplier, adder){
  return ( celsiusTemp * multiplier) + adder ;
}

let fahrenheitTemp = getFahrenheit(celsiusTemp, multiplier, adder);

console.log(celsiusTemp+" Celsius = "+fahrenheitTemp+" Fahrenheit");

Output:

"36 Celsius = 96.8 Fahrenheit"

This kind of implementation is called procedural programming. The variables and functions here are decoupled - that is variables are on one side and functions are on other side.

We can rewrite the above example so that it follows the object oriented paradigm:

let temperature = {
   celsiusTemp : 36,
   multiplier : 9/5,
   adder : 32,
   getFahrenheit: function (){
    return ( this.celsiusTemp * this.multiplier) + this.adder ;
  }
};

let fahrenheitTemp = temperature.getFahrenheit();

console.log(temperature.celsiusTemp+" Celsius = "+fahrenheitTemp+" Fahrenheit");

Output:

"36 Celsius = 96.8 Fahrenheit"

We have created the temperature object with 3 properties:

• celsiusTemp
• multiplier
• adder

and a method:

• getFahrenheit

Now is this better? Look at the getFahrenheit method. This method has no parameters. In contrast, the procedural counterpart of it has 3 parameters. Since, the properties and the methods are related, therefore, they are part of a single unit. One of the identifying mark of procedural code is a function with many parameters. In a object oriented way of writing the code, the functions aka methods end up having less input parameters. As per the clean code practices defined by Robert C Martin:

"Best functions are those which have no parameters"

.... this covers the encapsulation part of object oriented programming.


Abstraction:

Think of the case of truck driver. The driver needs to know only how to drive the truck. He must know, how to press the brakes, accelerator pedal, change the clutch and move the steering wheel. He does not need to know about the internal workings of the engine of the truck. This is abstraction in practice. We can use the same technique when implementing objects. We can hide some of the properties and methods from the outside.




The benefits include:

• Interface becomes simpler. 
• Impact of change is reduced: For example: if we remove a method from a object, it will not affect rest of the code as only the object can use the method.

Inheritance:
This is a mechanism which allows us to eliminate redundant code. Consider HTML elements:

• Textboxes
• Drop-down lists
• Check boxes

.. and so on. They have a few things in common. They should have properties like:

• hidden
• innerHTML

and methods like:

• click()
• focus()

Instead of redefining, these methods repeatedly in each of the methods - we can define once in a generic object and then the other objects can inherit this properties and methods.




Polymorphism:

• Poly = many
• morph = forms

In object-oriented programming, poloymorphism allows us to get rid of long switch-case statements or if-else statements. Consider our HTML elements example above. All the methods (click and focus) are common to the elements textboxes, checkboxes and dropdown. But the way in which the methods work may be different. Basically, the method behaves differently depending on the type of the object calling it.

Summarizing the benefits of object-oriented programming:
Encapsulation: Group releated variables and functions together. This helps to reduce complexity and increases reusability.
Abstraction: Hide the inner details and the complexity. Show only the essentials.
Inheritance: Eliminate redundant code.
Polymorphism: Helps to refactor ugly, switch case statements.


Practice at:

• http://jsbin.com/?js,console
• https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c