# OOP in JavaScript

Object-Oriented Programming (OOP) is a **programming paradigm** that organizes software design around **data**, or objects, rather than functions and logic. Think of it as a way to model real-world things in your code.

## Why ?

Imagine you are a car manufacturer. You don’t just start building a car from scratch every time. Instead, you create a **blueprint**. This blueprint defines the features (color, engine) and actions (drive, brake).

*   **The Blueprint** is the **Class**.
    
*   **The Physical Car** on the road is the **Object** (or Instance).
    

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/2448bb99-0c7c-49d0-a51d-5412e57cb5bd.png align="center")

## What is a Class in JavaScript?

Introduced in ES6, a `class` is a template for creating objects. It encapsulates data (properties) and behavior (methods) into a single unit, promoting **code reusability**.

Let’s look at how to translate that blueprint into JavaScript code.

```javascript
class Car {
  // The Constructor: The "Setup" function
  constructor(brand, model, color) {
    this.brand = brand;
    this.model = model;
    this.color = color;
  }

  // A Method: Defining behavior
  drive() {
    console.log(`The ${this.color} ${this.brand} is now driving!`);
  }
}

// Instantiating Objects (Creating cars from the blueprint)
const myCar = new Car("Tesla", "Model 3", "White");
const friendsCar = new Car("Tata", "Nexon", "Blue");

myCar.drive(); // Output: The White Tesla is now driving!
```

## Breakdown

*   **The Constructor Method:** This is a special method that runs automatically when you create a new object. It’s where you initialize the object's properties using the `this` keyword.
    
*   **Methods:** These are functions defined inside the class that describe what the object can *do*.
    
*   **Encapsulation (The Basics):** This is the practice of "bundling" the data and the methods that operate on that data within one unit (the class). It keeps the code organized and prevents outside code from accidentally messing with the internal logic.
    

### Example - The Student Class

```javascript
class Student {
  constructor(name, age, course) {
    this.name = name;
    this.age = age;
    this.course = course;
  }

  // Method to display details
  displayDetails() {
    console.log(`Student: ${this.name}, Age: ${this.age}, Course: ${this.course}`);
  }
}

// Creating multiple student objects
const student1 = new Student("Satpal", 24, "Full Stack Development");
const student2 = new Student("Aman", 22, "Data Science");

student1.displayDetails();
student2.displayDetails();
```

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/3001c06c-41fc-4830-bced-3d6a764fbc95.png align="center")

## The Four Pillars of OOP

### Encapsulation (Data Hiding)

Encapsulation is about keeping the internal state of an object private and only exposing what is necessary through a public interface. In modern JavaScript (ES2022+), we use the `#` prefix for truly private fields.

```javascript
class BankAccount {
  #balance = 0; // Private field

  deposit(amount) {
    if (amount > 0) this.#balance += amount;
  }

  getBalance() {
    return `Your balance is ₹${this.#balance}`;
  }
}

const myAcc = new BankAccount();
myAcc.deposit(500);
console.log(myAcc.#balance); // Error: Private field '#balance' must be declared in an enclosing class
```

### Abstraction (Complexity Hiding)

Abstraction means showing only the essential features of an object and hiding the "how it works" logic. You may know how to use a `fetch()` call in your Angular app/ React App, but you don't need to know the low-level TCP/IP handshake logic happening in the background.

### Inheritance (Hierarchy)

Inheritance allows one class to derive properties and methods from another. In JS, we use `extends` and `super()`.

```javascript
class User {
  constructor(username) {
    this.username = username;
  }
  logIn() { console.log(`${this.username} logged in.`); }
}

class Admin extends User {
  deleteUser(user) { console.log(`Admin deleted ${user}`); }
}
```

### Polymorphism (Many Forms)

Polymorphism allows different classes to be treated as instances of the same parent class through the same interface, but each responds in its own way.

```javascript
class Shape {
  draw() { console.log("Drawing a shape..."); }
}

class Circle extends Shape {
  draw() { console.log("Drawing a circle ⭕"); } // Overriding
}
```

## Prototypal Inheritance:

Unlike Classical OOP (C++/Java), JavaScript uses **Prototypal Inheritance**. Every object in JS has a hidden property called `[[Prototype]]` (accessible via `__proto__`).

*   When you call a method on an object, JS first looks at the object itself.
    
*   If it doesn't find it, it looks at the object's **Prototype**.
    
*   It keeps going up the "Prototype Chain" until it reaches `null`.
    

By using Classes and the Four Pillars (Encapsulation, Abstraction, Inheritance, and Polymorphism), you ensure that your code is:

1.  **Maintainable:** Changes in one class don't break the whole app.
    
2.  **Scalable:** Adding new features becomes a matter of extending existing logic.
    
3.  **Readable:** Your code tells a story about real-world objects.
    

### **Let's Connect! 🚀**

I’m currently deep-diving into the **JavaScript**, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

*   **Connect on LinkedIn:** [**Satpalsinh's Profile**](https://www.linkedin.com/in/satpalsinhrana)
    
*   **Follow my Blog:** [**blogs.satpal.cloud**](http://blogs.satpal.cloud)
    

**Keep coding and keep building.**