Object Oriented Programing in Javascript

#javascript #oop

What is OOP(Object Oriented Programing)?
OOP is a programming pattern that says the state(property) and the action(method) should be kept together in a single box(class).OOP tries to model real-world objects. It is useful to organize our code.

There are two types of OOP languages:

Class based languages like java, C#, php,C++ etc
Prototype based languages javascript

There are four principal/pillars of OOP:

Encapsulation:
- OOP puts things(code) into an object and organizes the things in units that model the real world this is encapsulation.
Abstraction
- OOP hides the complexity and the implementation detail, we just have to call the method and the rest of the complexity are hidden from us, this is an abstraction. Abstraction also provide a layer of security like private property or private method
Inheritance
- Inheritance means reusing of the code, that is extending from parent class where all the property and method (protected or public) are available to the child class
Polymorphism
- Polymorphism means many forms(Poly means many; morphism means form). But how it's related to OOP. It is related to OOP by concept called overriding and overloading.
- overriding: Suppose we have method name getMarks in parent class and with the same name we have a method in child class which will override the functionality of parent class, this is overriding. It is useful when we want custom logic for child class still using the some of the logic from the parent class
- overloading: In same class we can have two or more method with same name but with different number of argument or with different data type, this is called overloading.

Above was the definition and principal of OOP. Now lets understand how to implement OOP in javascript.

For understanding OOP in javascript, you should have a clear knowledge of prototypal inheritance in javascript, If you are unclear on that then please check my blog on it https://dev.to/bhaveshdaswani93/prototype-inheritance-in-javascript-1c3g

We have four ways for working with OOP in javascript:
1.Factory function.
2.Function constructor
3.Object.create()
4.ES6 classes

Let see them one by one

1.Factory Function:
In this, we create a function that receives parameter and in return, it provides an object, let see how it is useful in avoiding duplication of code.

Here in the example, personA and personB both have getFullName function definition which indicate duplication of the code which is not good programming practice. To avoid that we have created a factory function called person in which we pass the first_name and last_name as a parameter and it will provide the required object. By using factory function we have avoided repeating our code. But here is a problem with memory efficiency as getFullName function will be created each time the person function is called which is not good because if we can place getFullName in commonplace in memory where each new person object can call it then it would also be memory efficient, for to achieve this let's move to constructor function.

2.Function constructor:
What is a constructor function? A function that is initiated with a new keyword is a constructor function and the constructor function should start with a capital letter ( It is good practice to name constructor function with the first letter as capital like Person is good against person ). Let see this in an example and how it helps to be memory efficient.

In the above example Person is the constructor function and it has getFullName function in its prototype object, I have created two instance personA, personB from Person constructor. We can see that the code is resuable by having a constructor and prototype. Constructor function has that code which is unique to an instance that means personA and personB has there own first_name and last_name properties while the prototype has that code which is shared by the instance and also prototype properties are not copied to the instance, they are resolved through prototype chain which makes constructor function memory efficient.

3.Object.create():
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. In earlier section we have learned how to create prototype using constructor function, let see how we can create prototype using Object.create() with an example

In the above example, I have created a person object and use it as the prototype of the personA object using Object.create(person). Object.create will create a prototype chain where __proto__ property of personA will point to person object.

4.ES6 classes:
ES6 brings the keyword class which is familiar to most of the OOPS developers. Class in javascript is like a syntactical sugar behind the scenes it still follows prototypal inheritance. The class keyword was brought to bring simplicity and easiness for the developers to write OOP programming in javascript. let's see classes in action.

Above is an example of class. I have created Person class which contains the constructor function whose properties and method will be copied to each instance while the rest of the method or properties like getFullName is shared.
Let me provide you a cheat sheet for classes: anything you want to be unique to the instance like first_name, last_name is unique to each instance, place that property or method in the constructor function and shareable property or method like getFullName should be placed outside the constructor and should be inside the class.

Conclusion:

OOP is a programming style that helps you to write clear, understandable, easy to extend, easy to maintain, memory efficient and DRY code.

In Javascript, we have 4 ways to write OOP code