Understanding OOPs in Javascript (Encapsulation, Inheritance)

Understanding OOPs in Javascript (Encapsulation, Inheritance)

·

3 min read

Introduction

Hello all, In this article, I am writing down about Object-Oriented Programming paradigm in Javascript. I cover only two concepts of the OOPs which are Inheritance and Encapsulation. There are many articles about it on google but here I am writing mostly about how I look at these topics while coding those concepts.

What is the Object-Oriented Programming paradigm?

It actually refers to that the program that we do is underhood stored as an Object which consists of some fields (properties) and procedures (methods). Syntactically you see them as Class, Variable, and Function but it actually is an Object.

class A {
    constructor(){
        this.prop = "some value";
    };
   foo(){
   }
}

The above code snippet would look a bit abstractive for noobies, but the code is nothing but an object which has the prop field and foo method.

A {
    prop : "some value",
    foo : f foo()
}

and those methods will be stored in the Object of Prototype. you can see this by creating an instance of your class and consoling the value of the instance. it does not mean that you can call that function with dot notation here. I am trying to explain the outline of the OOPs concept.

OOPs concepts:

There are 4 mainly used OOPs concepts out there, which are

  1. Inheritance

  2. Encapsulation

  3. Abstraction*

  4. Polymorphism*

What is Inheritance?

As the name suggests the inheritance concept is all about inheriting the properties and methods of another class to the other. Here the class from which we inherit the properties becomes the parent and the class which Inherit the fields becomes the child class.

class Calculator { // parent class
      constructor(a, b){ // note: constructor is the first and default method that will execute for the first time when you create the instance of the class.
           this.arg1 = a;
           this.arg2 = b;
      }

      total () {
          return this.arg1 + this.arg2;
      }

}

class Calculator1 extends Calculator {
       constructor(a, b){
             super (a, b); // super is the parent class constructor.
       }
}

var calc = new Calculator1(10, 20);
calc.total() // expected output will be 30

Basically, Here we did not write the total method in the child class all that we did is inhering the "Calculator". there is no limit to doing that in javascript.

What is Encapsulation?

I always remember its definition as the concept of data hiding. but never know how that could be implemented in the code. though we don't have the access modifiers (public, private, protected) in Javascript. we can still relate it to the concept.

Data hiding is nothing but not allowing to use of the properties of the class or object using its instance. we write the methods to access that specific data and give them public access.

Conclusion

In Javascript, you can only see these concepts implemented in your project. if you are a beginner who is trying to learn javascript try to learn at least the two concepts clearly.

Did you find this article valuable?

Support H5G OCEAN by becoming a sponsor. Any amount is appreciated!