Writing efficient and reusable code in JavaScript (OOPs)
Tags: javascript, oop, webdev, programming
Published: 2023-01-19 14:07:35

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki8dda04d9a0xu4f8527.jpeg)
**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.

```javascript
var football=500;
var tax=1.6;

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l988rcv26vuks436q72c.png)
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.

```javascript
//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.
```javascript
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 ?**

```javascript
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2s0x0vpnwdh9h4lnibo.jpeg)
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.

```javascript
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.