DEV Community

Cover image for JavaScript OOP Explained Without Making Your Brain Hurt
Abhijeet231
Abhijeet231

Posted on

JavaScript OOP Explained Without Making Your Brain Hurt

If you are someone who has just started learning Object-Oriented Programming, or you are thinking about learning it, then this is the perfect place to get a basic understanding of OOP..

So let me set the context first, I'm a JavaScript developer (MERN) and i have been using functional programming from past 5/6 months.

Built some project around it. But recently I got some exposure to Object-Oriented Programming, and out of curiosity i learend about it, By the way, I'm still learning.

But in todays articel , i'm going to share all my understanding till now and will try to convey it in a beginner friendly way. So let's get started….

What is Object Oriented Programming

So you must be thinking what does Object Oriented Programming even mean !!

Let me tell you if you are someone like me , who has some prior experience with JavaScript and been buildign things around it and still don't know about Object Oriented Programming.

Then it's 101% sure what you are using till now is known as functional Programming.

So in functional Programming you basically use functions to write code, While writing controller logic, handling database connections, or building API routes, you are mostly using functions everywhere.

And i'm preety sure, you mus have thought about it , if not then now you should connect the dots , you will notice that you have been using functions almost everywhere.. So that's what Functional Programming mean.

But Object Oriented Programming is a way of writing code where we organise things as Objects. These objects contains :

              1.Properties
              2.Methods
Enter fullscreen mode Exit fullscreen mode
const car = {
  barnd: "honda",
  color: "white",
  start: function() {
   console.log("Car started")
 }

 car.start(); // Car Started
Enter fullscreen mode Exit fullscreen mode

Here, brand and color are properties, and start is a method.

This syntax is called as - Object Literal.

Using this syntax, you can access the object's properties and methods.

What is a Class in JavaScript

Class in JavaScript is a blueprint for creating objects.

When we need many Objects with similar dynamic properites (same key but different value for each object) we use class syntax.

class Car {  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  start() {
    console.log(this.brand + " started");
  }

};

const car1 = new Car("Honda", "White");
const car2 = new Car("BMW", "Black");
Enter fullscreen mode Exit fullscreen mode

So now you can create as many objects you need , and they all have the same properties but differnet value, which you pass when creating the object.

Now, if you're not just vibe coding, after seeing the above code you might be thinking:

"Dude, what do constructor and the new keyword even mean?" why are we using these ?

Don't worry you don't have to go to chatGpt and ask all this. Because i already did that for you. 😌

But you can obviously go and argue with GPT , ask him questions to increase your understanding.

What is a Constructor & new keyword ??

A constructor is a special method that runs automatically when an object is created.

It is usually used to initialize properties for the object.


class Car {  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  start() {
    console.log(this.brand + " started");
  }
}

const car1 = new Car("Honda", "White");
const car2 = new Car("BMW", "Black");
Enter fullscreen mode Exit fullscreen mode

In this code the constructor is takign 2 values - brand and color & assigning them to the object using this keyword.

Now as you can see - while creating eveyr object - each time we are using new keyword, but why?
So when we do -

const car1 = new Car("Honda", "White");

Now JavaScript is doing several things behind the scenes.

  • It creates a new empty object in memory

  • It links that object to the Car class prototype.

  • It runs the constructor and passes the arguments ("Honda", "White").

  • It returns the newly created object.

So after running this code, now the object looks something like this -
{
brand: "Honda",
color: "White"
}

And it also has the access to all methods declared inside the class.

Every time we are doing - new Car() , we are creating new objects.

This whole "class" thing in javascript allows us to create as many objects we want by using a single blueprint.

But you must have been thinking, if we create many objects, will the methods be copied many times?

The answer is no..
So let's talk about memory management a little bit , so t hat you can have a better clarity.

How memory optimization works

All objects created from a class share the same methods through the prototype. This helps JavaScript avoid duplicating methods in memory.

So when we write this code -

class Car {
  constructor(brand) {
    this.brand = brand;
  }
  start() {
    console.log("Car started");
  }
}
Enter fullscreen mode Exit fullscreen mode

The start() method is not duplicated for every object. Instead, JavaScript stores it once in something called the prototype, and every object simply references it.

So this means -

  • Each object stores its own data.
  • But all objects share the same method.

Now we have one more important thing to cover, which is known as Encapsulation. So let's try to understand what does it even mean ? And how it works ?

Basic Idea of Encapsulation

Encapsulation is one of the core ideas in Object-Oriented Programming.

In simple terms, encapsulation means hiding the internal details of an object and allowing access only through controlled methods.
Think abut it like using a keyboard.

You press a specific key and the key types in you computer. But don't directly manipulate the keyboards internal circuits.

The complex implemention is hidden from you.
In Programming, encapsulation works the same way. We protect important data inside a class and allow interaction through specific methods.

In JavaScript, encapsulation is mainly done using :

  • private fields (#)

  • Getters

  • Setters

  • Closures

And If you are using Typescript then you also have public & private keywords like Java or C++.

For now, I'm just sharing the basic idea of encapsulation here, because I'm still learning it myself and don't fully understand it yet.

Once I learn it properly and get a deeper understanding, I'll definitely write another article explaining it in detail.

So stay tuned! And if this blog helped you in any way, feel free to follow me for more learning notes and articles.

Summary

OOP organises code using objects
Classes act as blueprint for objects
The constructor initializes object data
The new keyword creates a new object
Methods are shared through prototypes for memory efficiency
Encapsulation hides internal detials & protects data

If you found this helpful, feel free to connect with me on my social handles. I regularly share about what I'm learning on my social handles.
🔹LinkedIn 🌻
🔹X 🌻

Top comments (0)