Writing efficient and reusable code in JavaScript (OOPs)

There are two paradigms that are frequently used in programming. Object-oriented programming (OOPs), and functional programming. These paradigms represent several ways of creating code. However, the result remains the same.

Functional programming makes a clear difference between data and functions because data can exist independently of them. You may recall, for instance, that you send arguments to functions when they need certain data. After performing some work on the supplied data, the function provides certain values that can be used elsewhere in your program.

var football=500;
var tax=1.6;

function totalPrice(){
    return football*tax;
}
var pay=totalPrice(football,tax);
console.log(pay); //800

The object-oriented programming(OOP) paradigm is an alternative paradigm that combines data and functions into objects.

The core concept of OOP is the use of objects to organise similar data and functionality in our systems. In contrast, the functional programming technique requires that the data utilised in the app and the functions that manipulate that data be kept apart.

Let's take example of same code to write by making objects.

//purchase1 is object,storing data and method 
var purchase1={
    football:500,
    tax:1.5,
    totalPrice:function(){
        var calculate=purchase1.football * purchase1.tax
        console.log('TotalPrice: ',calculate);
    }
}
//Calling method in function using dot operator
purchase1.totalPrice(); // output : 750

Hence, we can make as many objects like this to organize our code.

Making another object of same type.

var purchase2={
    football:470,
    tax:0.8,
    totalPrice:function(){
        var calculate=purchase2.football * purchase2.tax
        console.log('TotalPrice: ',calculate);
    }
}
purchase2.totalPrice(); //output : 376

Let's clearly observe now , what if we want both the object ?

var purchase1={
    football:500,
    tax:1.5,
    totalPrice:function(){
        var calculate=this.football * this.tax
        console.log('TotalPrice: ',calculate); //output : 750
    }
}
purchase1.totalPrice();//750

var purchase2={
    football:470,
    tax:0.8,
    totalPrice:function(){
        var calculate=this.football * this.tax
        console.log('TotalPrice: ',calculate);
    }
}
purchase2.totalPrice(); //output : 376

For sure we can do this 👍.
But what if there are 100 such objects 🤔?Being a developer we are not going to write code for 100 times ‼️

Here comes **classes **into picture.
To code this efficiently, we use something called classes. They are essentially a blueprint that you can repeatedly use to build new objects of a certain kind, as many times as you like.

In the class-based version, in JavaScript any class is built using the class keyword, the Purchase class uses the constructor method to initialize the properties football and tax.
The role of the constructor function is to assign the passed in parameters to the future objects properties.

Here is class based version of the above code.

class Purchase {
    constructor(football, tax) {
        this.football = football;
        this.tax = tax;
    }

    totalPrice() {
        var calculate = this.football * this.tax;
        console.log('TotalPrice: ', calculate);
    }
}

const purchase2 = new Purchase(470, 0.8);
purchase2.totalPrice(); //output : 376

The totalPrice method is added as a regular method on the class, rather than being added directly to the object as a property.
Creating an object from the class is done using the new keyword, just like in the original version. The totalPrice method is called in the same way as before.

If you have any query let me know in the comment section. I'll try my best to answer them.
If you find this blog helpful, please ❤️ like it.
You can follow me if you wish to enhance your fundamental knowledge of JavaScript
In the coming blogs I'll be covering most asked concepts of JavaScript.