Understanding OOP (Object-Oriented Programming) in JavaScript

Object Oriented Programming is a programming paradigm centered around objects rather than functions. It’s nothing new, it’s been around since the 70’s but unlike tools and frameworks that come and go , OOP is still very relevant today. Because OOP is not a programming language or tool! It is a style of programming of a programming paradigm. 

There are several programming languages that support OOP such as C#, Java, Ruby, Python, JavaScript and more. Many of the popular frameworks actually design and use the popular OOP concepts, for example Angular and React.

Learning the principle and understanding OOP Principles and how to implement them in JavaScript incorporates the four pillars of core concepts namely: Encapsulation, Abstraction, Inheritance, and Polymorphism.

Image

Before OOP there was procedural programming that divides several programs into a set of functions. Data stored in a bunch of variables and functions that operate on data. This style of programming is very simple and straightforward. Often you learn in programming 101. But as your programs grow you’ll end up with a bunch of functions all over the place. 

You will find yourself copying and pasting a line of codes over and over. If you make a change in function and several functions break. That’s what we call a “spaghetti code”. There is so much interdependencies between all this function and the end up of programmatic. OOP came to solve these problems.

Image

In OOP it combines a group of related variables and functions into a unit. We call that unit an “object”. We refer to the variables as properties and functions as “methods”.

Image

For example: A Car is an object with properties such as make, model, and color then methods as start(),  stop(), and move().

A real example of OOP using a local storage of a browser. Every browser has a local storage object that allows you to store data locally.

ENCAPSULATION

Image

In OOP we group related variables and functions to operate on them and that we call encapsulation. For example, we have 3 variables baseSalary, overtime, and rate. Below we have a function to calculate the wage of an employee. We refer to this implementation as a procedural. So we have variables on one side and functions on the other side they are hard decoupled. 

As Uncle Bob says “The best functions are those with no parameters!” The fewer the number of parameters the easier to use and maintain the function.

ABSTRACTION

Think of a DVD player as an object. It has a complex logic board on the inside and a few buttons on the outside that you interact with. Simply press the button and you don’t care what happens inside. All the complexity is hidden from you; this is an abstraction in practice.

Image

We can use the same techniques in our objects. We can hide some of the properties and methods from the outside that will give us a couple of benefits. First will make the interface of those objects simpler. Using an understanding of an object and a few properties and methods is easier than an object with several properties and methods. The second benefit reduces the impact of change. Let’s imagine that tomorrow we change the inner workings of private methods. None of these methods will leak to the outside because we don’t have any codes that touch outside the containing object. You may delete the method or change its parameters but none of these changes will impact the rest of the applications code.

INHERITANCE

Is a mechanism that allows you to eliminate redundant codes. Example think of HTML elements like TextBoxes, DropDown layers, CheckBoxes and so on. All these elements have a few things in common. They should have properties like hidden, and innerHTML. A method like click(), and focus().

Instead of redefining all these properties and methods of every HTML element, we can define them once in a generic object called as HTMLElement and have other objects inherit these properties and methods.

POLYMORPHISM

POLY means many, and MOR means form which is “Many Form”. In OOP polymorphism is a technique that allows you to get rid of long if and else or switch and case statements. Back to our HTML example, all these objects should have an ability to be rendered on a page. But the way each element is rendered are different from the others. If you want to render multiple elements in a procedural way. Our code would probably look like a nested case from the switch function.

Image

But in object orientation we can implement a render method for each of these objects. And the render method will behave differently depending on the type of the object you’re referencing. So we can get rid of nasty switch and case codes and use only one line of code like this element.render().

Therefore, there will be benefits of Object-Oriented programming. First using encapsulation, we group related variables and functions together. And this way we can reduce complexity.

Secondly we can reuse the objects in different parts of the program or in different program

Third In abstraction we hide the details and the complexity and show only the essentials. This way we reduce complexity and also isolate the impact of changes in the code.

fourth In inheritance we can eliminate redundant code. Last but not the least In polymorphism we can refactor ugly switch/case statements.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *