OOP concept in JavaScript

Picture from google

Today’s topics:
1. What is OOP (Object-Oriented Programming)?
2. OOP in JavaScript
3. Creating an object instance from a class in JavaScript
4. Encapsulation
5. Abstraction
6. Inheritance
7. Polymorphism
8. Prototype objects
9. Pure functions
10. Stack

Topic 1: What is OOP (Object-Oriented Programming)?

Object-Oriented Programming (OOP) is a computer programming model that organizes software design around data, or objects, rather than functions and logic. Object-Oriented Programming stops thinking in terms of individual variables and function. Begin thinking in terms of cohesive, self-sufficient objects.

Why we use OOP? Because It’s easier to debug codes when we use objects and classes. We can also use techniques like encapsulation and inheritance.

Topic 2: OOP in JavaScript

Like other programming languages, we can also use Object Oriented in JavaScript. In OOP, we create objects and use them. Anything became an object like you, your laptop, etc. If I think you are an object, you may have some properties in your object like first name, last name, age, phone, email, etc.

However, JavaScript is prototype-based programming. In this kind of program, the object encapsulates the properties.

Here’s a list of concepts that are most often used when talking about object-oriented programming (OOP):

Object, property, and method
Class
Encapsulation
Abstraction
Reusability/inheritance
Polymorphism
Association
Aggregation
Composition

Topic 3: Creating an object instance from a class in JavaScript

First, we can see an example to know how to create an object instance from a class in Javascript:

class Person {
    constructor(name, age, designation){
        this.name = name
        this.age = age
        this.designation = designation
        this.getName = function() {
            console.log(“Name is:”, this.name)
        }
    }
}
const personObject = new Person(‘Khan’, 20, ‘Web Developer’)
personObject.getName()
// Name is: Khan
console.log(“Age is”, personObject.age)
// Age is 20
console.log(“Designation is:”, personObject.designation)
// Designation is: Web Developer

First, we created a class named ‘Person’. Inside this function, we created the constructor function and inside this, we defined some properties. After that, we create an object instance named ‘personObject’ for person class using ‘new’ keyword. To get the value of the properties, we need to use ‘personObject’ instance.

Get Md Arif Hossain’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Topic 4: Encapsulation

Before going to example, we need to know what is encapsulation. In short form, it means hiding information or data. Private variables are available only is current scope means current function and it will not accessible outside of the function or in the global scope.

For example:

const Person = function(_name, _title) {
    const name = _name
    const title = _title
    return {
        details : function() {
            console.log(`${name} is a ${title}.`)
        }
    }
}
const person = new Person(‘Khan’, ‘Web developer’)
person.details()
// Khan is a Web developer.

In this example, name and title are only visible inside the scope of the function ‘Person’. The ‘details’ method is visible to the caller of ‘Person’. So we can say, name and title are encapsulated inside ‘Person’.

Topic 5: Abstraction

Abstraction means implementation hiding. It is a way to hide the implementation details and show the necessary information to the caller.

Let’s see the example and explain it:

const Person = function(_name, _title) {
    const name = _name
    const title = _title
    //public
    this.getName = function() {
        return name
    }
    //private
    const details = function() {
        return `${name} is a ${title}.`
    }
    //public
    this.getDetails = function() {
        return details()
    }
}
const person = new Person(‘Khan’, ‘Web developer’);
console.log( person.getName() )
//Khan
person.details();
// TypeError: person.details is not a function
console.log( person.getDetails() )
// Khan is a Web developer.

Here, we can access only public methods. If we call a private method, it will throw an error. I hope you can understand the abstraction now.

Another real-life example is, think you are a child. You demand some money from your father. Father give you some money. But you don’t need to know, from where the father gets that money. It is hidden for you. But your father does some work or a job to get that money. So you ask for money and get easily, this is called encapsulation.

Topic 6: Inheritance

From the meaning of inheritance, we can guess something about it. Inheritance has an ability of reusability. It helps to create a new class using the existing class. This means the child class reuses all fields and methods of the parent class (common part) and can implement its own (unique part). However, JavaScript is not a class-based language, but prototype-based. So, in JavaScript inheritance is achieved by using a prototype and it called prototype inheritance.

Let’s see an example:

Topic 7: Polymorphism

Poly means many and morphism means form. So polymorphism means many forms or many shapes. Using polymorphism, we can call the same method on different objects. Let’s see an example:

Topic 8: Prototype objects

Prototype objects are a simpler approach for adding new methods/properties to a constructor function. There is an additional hidden property known as ‘prototype’ property in every object created from the constructor function.

Topic 9: Pure functions

A pure function is a function that mutates variables/state/data outside of its scope. Let’s see an example to clear the concept:

Topic 10: Stack

The stack is a Data Structure. It is a formula for programming. It follows ‘Last Input First Out’ (LIFO). Nowadays JavaScript uses it to do code more efficiently.