Hey Web Codders! 👋 It’s me, Vikas Sankhla, your coding buddy. Today we’re diving into something super cool:
Object-Oriented JavaScript (OOP).

Ever wondered how big apps like games, shopping carts, or social media are built? 🤔
Yup, they use OOP to organize code nicely so it’s easier to build, manage, and grow.

Let’s learn it together in the simplest way possible! 🧠✨

🧱 What is Object-Oriented Programming (OOP)?

Okay, imagine LEGO blocks. 🧱

Each block (or piece) has its own shape, color, and job.
When you connect them, you build something BIGGER and BETTER. 🚀

In JavaScript:

• Each block = Object
• The full build = App

OOP is a way to break code into objects that hold data + actions.

💡 Why Use OOP?

• ✅ Keeps your code organized
• ✅ Helps reuse code (no need to rewrite!)
• ✅ Makes big apps easy to manage

🛠️ How to Create an Object (The Basics)

Let’s say we want to describe a car. 🚗

We can make an object like this:

let car = {
    brand: "Tesla",
    model: "Model 3",
    color: "Red",
    start: function() {
        console.log("Vroom! The car has started. 🔥");
    }
};

console.log(car.brand);  // Tesla
car.start();             // Vroom! The car has started. 🔥

What’s happening here?

• brand, model, color ➔ Properties
• start() ➔ Method (an action)

🏫 Classes – The Blueprint 📐

Think of a class like a recipe. 🍳
You write the recipe once, and you can bake many cakes! 🎂

In JavaScript, a class is a blueprint to create objects.

Here’s how we write a class:

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

    start() {
        console.log(`${this.brand} is starting! 🚗`);
    }
}

We use the constructor() to set up the car’s details.

🔨 Create an Object from a Class

jsCopyEditlet myCar = new Car("Tesla", "Model 3", "Red");
myCar.start();  // Tesla is starting! 🚗

🔑 What is this?

When we use this, it means:
👉 “I’m talking about this object right here.”

Example:

jsCopyEditconsole.log(this.brand);  // Points to the car’s brand

So inside the class, this.brand means the brand of the car we are working with.

👨‍👩‍👦 Inheritance – Kids Get Stuff from Parents

Inheritance means:
One class (the child) gets features from another class (the parent). 👨‍👩‍👦

Example:

jsCopyEditclass ElectricCar extends Car {
    charge() {
        console.log(`${this.brand} is charging! ⚡`);
    }
}

Now let’s use it:

jsCopyEditlet myEV = new ElectricCar("Tesla", "Model X", "Black");
myEV.start();    // Tesla is starting! 🚗
myEV.charge();   // Tesla is charging! ⚡

Wow! 🚀 ElectricCar can:

✅ Use things from Car
✅ Add new stuff like charge()

🔄 Prototypes – The Secret Sauce

Every object in JavaScript has a prototype. 🧪
It’s like a hidden backpack that holds extra powers.

Example:

jsCopyEditCar.prototype.honk = function() {
    console.log(`${this.brand} goes beep beep! 📣`);
};

myCar.honk();  // Tesla goes beep beep! 📣

We added a new method to ALL cars after creating them!

🌀 Polymorphism – Same Action, Different Behavior

Poly-what? 😅
Let’s keep it simple:

Polymorphism = Different objects do the same thing in their own way.

Example:

jsCopyEditclass Bike {
    start() {
        console.log("The bike zooms off! 🏍️");
    }
}

let myBike = new Bike();
myCar.start();   // Tesla is starting! 🚗
myBike.start();  // The bike zooms off! 🏍️

Same method name: start()
Different results. 💥

🔒 Encapsulation – Keep Things Private

Encapsulation means hiding details and only showing what’s needed.

Example:

jsCopyEditclass BankAccount {
    #balance = 0;  // Private property

    deposit(amount) {
        this.#balance += amount;
        console.log(`Balance is now $${this.#balance}`);
    }
}

let myAccount = new BankAccount();
myAccount.deposit(100);  // Balance is now $100
console.log(myAccount.#balance);  // ❌ ERROR: Private field!

✅ You can deposit money
❌ But you can’t directly see or change #balance

SAFE! 🔐

🔄 Quick Recap Table

🎯 Conclusion

And there you have it, Web Codders! 🎉 You just mastered OOP in JavaScript:

• ✔️ Classes & Objects
• ✔️ Constructors & this
• ✔️ Inheritance & Prototypes
• ✔️ Polymorphism & Encapsulation

OOP helps you build cleaner, smarter, and stronger apps. 💪

👉 Want to level up faster?
Subscribe now: YouTube – Web Codder
📸 Follow on Insta: @web_codder_official
💬 Join the chat: WhatsApp group

Let’s keep coding and having fun! 🚀