# Understanding Object-Oriented Programming in JavaScript

> If u find picture unclear here then read this blog on my SubStack accout with clear images  
> [Read Here SubStack](https://open.substack.com/pub/deepanshuyadav1811/p/understanding-object-oriented-programming?r=45nko0&utm_campaign=post&utm_medium=web&showWelcomeOnShare=true)

If you’ve ever felt like your code is becoming a tangled mess of variables and functions, you’re not alone. As projects grow, keeping everything organized becomes a challenge. This is where **Object-Oriented Programming (OOP)** shines. It’s not just a syntax change; it’s a way of thinking that helps you build scalable, reusable, and manageable applications.

> JS is not a OOP language but it is a object linked to an object programming language

## Object Oriented Programming In JS

In software engineering, anything that we have can be mapped to a blueprint or a vision. For example, in Amazon, every product has a similar structure, we can generalize this and make sure we don’t repeat anything again and again

## Classes

Classes are the blueprint on a set of real life entity.  
Classes are going to represent how an entity should look and behave, When we say how do they look, we refer to the properties they posses. And when we say how they behave then we mean what actions can be performend on them

## Let’s take a example:

Consider a ‘Product’ class, inside this product class what do u think should be the properties of a product?? What is a property ??  
Property is just any feature that the product can contain.

*   name → Name of the product
    
*   price → Price of the product
    
*   Company → Company the product belongs to
    
*   reviews → set of feedBacks / reviews the product got
    
*   description → Description of the product
    
*   and many more…
    

So above are the set of ‘properties’ that a ‘Product’ class can posses. In technical terms these properties are refffered as **‘Data Members’.** If two products are different from each other then atleast one of the data members should have a different value in them

Now what are the things we can do with the product??

*   We can buy a product
    
*   We can display the details of a product
    
*   We can wishlist a product
    
*   We can rate a product
    
*   We can add review the the product
    
*   and many more…
    

These are the actions which can be done on a product, which we can also consider as the ‘behaviour’ of the product. And in technical terms these are reffered as ‘**Member Function’**

## How to make a class in JS?

In JS, We have a **‘class’** keyword, that can help us to make a class and include the **data-members and member-fuction** inside it

Every class has a name associated to it as well, that we have to define once we declare the class.  
**Syntax:**

![](https://substackcdn.com/image/fetch/$s_!bb2c!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F0e751a06-6fc7-4b11-94a3-c3a6e8e5ba3d_775x70.png align="center")

So, as we know the synatax of the class.  
Let’s write our first class with name ‘Product’

![](https://substackcdn.com/image/fetch/$s_!hwcH!,w_2400,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fce10259e-745e-428e-9125-75638e232300_1117x514.png align="center")

## Constructor: a very special member function of every class

Every class that we make in JS, has one **special member function** called as **Constructor.  
Now what is so special about this?  
So whenever we create an object using classes, the constructor is the first method that is automatically called by JS. It is already available for any class u make. The default version of this constructor is also called "‘default constructor’  
But we can also change the implimentation of the default constructor by writting one of our own constructor  
To make our own we just need to use a keyword ‘constructor’  
Syntax:**

![](https://substackcdn.com/image/fetch/$s_!Kov6!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1b61eb15-0abb-4c87-8aff-718ad471a92f_756x142.png align="center")

We will discuss more internals of constructor later in this blog

## Objects: creating objects using classes

Now till now classes are just the blueprint.  
But using classes the final entity that we will develop is called as ‘object’  
How can we create an object of a class??  
There is a keyword in JS called as **‘new’** which can help us to create an object out of a class

![](https://substackcdn.com/image/fetch/$s_!E6eW!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F20295492-efe2-438b-a089-0fcf3e2d118b_1009x375.png align="center")

Now if we try to print ‘iphone’ object then we will get a ‘product’ object with data members as the key

![](https://substackcdn.com/image/fetch/$s_!6grr!,w_2400,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F6bc01840-3cc7-4cde-b0a0-5ccee65fe42c_1106x809.png align="center")

Now u will think that if we get a object using ‘new’ keyword and class then what is the difference between the normal object and object created using a class??  
So the difference is that the object created using the class are the object which are created using a proper blueprint  
And normal objects are created without any blueprinting

Now u may think that we get the data members as the key in the iphone object but what about the member functions??  
so to see member function we need to run the code in browse

![](https://substackcdn.com/image/fetch/$s_!B-3P!,w_2400,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F77cdd1f4-1679-4b5d-81f9-a7d24c540d04_1635x665.png align="center")

But what if we define our own constructor manually??

![](https://substackcdn.com/image/fetch/$s_!-tLn!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fed9f180b-8a38-4144-bd4e-f4d028b0c6c9_906x463.png align="center")

Now here u can see if we create our own constructor then as we have studied earlier that the first function that is called automatically is the constructor function hence we get to see “Constructor called”

## How does ‘new’ work?

Everytime we call ‘new’, it does the following 4 steps procedure

1.  It creates a brand new plain & absolutely empty object
    
2.  It calls the constructor of the class and passes the newly created object (not as a parameter) but inside a keyword called ‘this’ (we have studied ‘this’ in depth u can refer my blog here → [THIS](https://deepanshuyadav1811.substack.com/p/the-magic-of-this-keyword-call-apply)). So constructor automatically has access to the ‘this’ keyword and when we call ‘new’ , then the ‘this’ keyword has access to the plain object created in the Step-1 and constructor now can use the ‘this’ keyword inside it. And then whatever is the logic of the constructor it is executed.  
    **(Inside every function in JS we have access to ‘this’)**
    
    ![](https://substackcdn.com/image/fetch/$s_!q9Ie!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9d966b95-a934-494d-8226-d5c4bc1b22e1_950x493.png align="center")
    
3.  In step-3, ‘new’ triggers everything need to be done for prototypes to work (Will discuss this in deep in next blog of prototype Linking)  
    (Step 3 is the **prototype linkage**. This is the mechanism that enables prototypical inheritance, allowing instances to access methods and properties defined on the constructor's prototype.)
    
4.  Now if from the constructor an object is manually returned, object is stored in the called variable, otherwise in any case i.e either we don’t return anything or we return something apart from an object, then the constructor dosen’t care about it and return the value inside the ‘this’ keyword
    
    ![](https://substackcdn.com/image/fetch/$s_!eofM!,w_2400,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb71c01c1-dde3-4637-be5f-604edb07514e_1905x798.png align="center")
    
    * * *
    

Now there is another way to declare/ use data members in a class  
by declaring them inside the constructor so that we can manipulate/pass there values through constructor

## Complete flow of code execution of a class

![](https://substackcdn.com/image/fetch/$s_!g1BW!,w_2400,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fc0cf6e08-1488-458e-98c6-2f050e6968ff_1482x746.png align="center")

Now here lets execute this code line by line to understand the full execution flow of a class

1.  We will start from line-18  
    here as we have a ‘new’ keyword then we will create a completely plain & empty object
    
    ![](https://substackcdn.com/image/fetch/$s_!2T8X!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F94e48d07-67b2-4665-a9e5-55a492408c75_444x273.png align="center")
    
    Now what ‘new’ will do is that we will start executing ‘Product()’ and as we know this refers to the constructor(mean we will start executing the constructor)  
    But before executing it will give access of this plain object to ‘this’ of constructor (mean this will point to the plain object
    
    ![](https://substackcdn.com/image/fetch/$s_!q9Ie!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F9d966b95-a934-494d-8226-d5c4bc1b22e1_950x493.png align="center")
    
2.  Now we will move to line-2  
    Here we have our constructor and it is recieving the arguments that we have passed in Product(), as parameter
    
3.  Now we will move to line-4  
    here we have
    
    `this.name = productName   `Now what this line will do is it will create a key by the name as ‘name’ and put the value in it as ‘productName’ which is ‘iphone’ inside the new plain object created by the ‘new’ keyword  
    But how??  
    As ‘this’ is pointing to the plain object which mean we can see this line as  
    `plainObject.name = productName`
    
    ![](https://substackcdn.com/image/fetch/$s_!Bbwh!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2585b93a-ace8-47ad-873f-aac536f6f645_603x355.png align="center")
    
4.  Now similarly we do the same with the line-5,6,7 & 8  
    and finally we will see our plain object created by ‘new’ as
    
    ![](https://substackcdn.com/image/fetch/$s_!D3Qd!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd0e50de6-5366-443e-ba30-fb3626fadcf4_832x536.png align="center")
    
    > Now we will hit step-3 of the ‘new’ keyword but let’s skit that for naow and go to step-4 og ‘new’ keyword
    
5.  Now as our constructor is not returning a object manually  
    hence we will return the value of ‘this’  
    and here our ‘this’ is the plain object  
    so we will get that object
    
    ![](https://substackcdn.com/image/fetch/$s_!Atqu!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F35b81869-3a7d-4ac9-860d-e3f3529f030b_471x167.png align="center")
    

## Classes as wrapper on functions

In JS, every class we write is a wrapper over function, in older version of JS “class” keyword did’t exist , hence to do the blue printing we used to have only functions

here how we can use functions as classes

![](https://substackcdn.com/image/fetch/$s_!3u11!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fd413df51-aa16-4623-a4fc-1a92475be8c6_855x266.png align="center")

Now here as we know every function in JS have ‘this’ hence we can use ‘this; inside a function  
Niw u will think that what will be the constructor of this function  
So let me tell u in the functions we have *function constructor  
*this ‘product’ function is the *function constructor*

And rest of the code will work normally like it does in classes (like new will make a empty obj and all that part)

Now u think okk we can use data members like this but what about member function so let’s see them also

![](https://substackcdn.com/image/fetch/$s_!243D!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb3613121-62b0-4d4e-964c-5af103835b17_839x489.png align="center")

now if u see here we have declared a function (desplayProduct) inside function (product) but when we are trying to access it by doing  
`console.log(iphone.displayProduct() )   `then it throw a error that ‘displayProduct’ is not a function

So how can we actully create and use member functions in function constructors??

![](https://substackcdn.com/image/fetch/$s_!S-40!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F3bc73280-9915-4f48-b896-f3922ecd8678_798x489.png align="center")

So here u can see now our member function is working smoothy by simply making the function as function expression and associating ‘this’ with it

But the problem with declaring member functions using ‘this’ inside the function,  
So whats the problem  
So the major problem is that if  
This creates a brand new copy of the `displayProduct` function in memory for every single `product` you create. If you create 1,000 products, you create 1,000 identical functions.

So to tackle this and If you specifically want it to go into the prototype (like it does in the classes) so that all instances share a single, memory-efficient function, you must define it outside the constructor on `product.prototype`

![](https://substackcdn.com/image/fetch/$s_!fyBG!,w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8dcd99ac-7cc9-434d-a7aa-8680b8293efc_740x443.png align="center")

## Thanks or reading