📘 Learn Object-Oriented Programming (OOP)

Hello, future developers! 😊 Ever wondered how websites like Amazon manage your shopping cart or how a game like Tic-Tac-Toe keeps track of moves? It’s all made possible through Object-Oriented Programming (OOP). Don’t worry if you’re new — let’s build up step by step! 🚀

📦 What is Object-Oriented Programming (OOP)?

OOP groups data and behavior together into objects, making code reusable, organized, and realistic. Example — your pen, notebook, and laptop each have:

• Properties → color, size, brand
• Actions → write, open, start

Objects combine these in one unit, just like real-world entities.

🧩 Why is OOP Important in JavaScript?

JavaScript handles dynamic web elements like buttons, menus, and forms. Each element has:

• Properties (color, size)
• Actions (click, hover)

OOP helps represent them as objects in code for easy control and reusability.

🗝️ Class and Object

A class is a blueprint. An object is a real item built from that blueprint.

 
// Class: Recipe (Blueprint)
// Object: The actual cake baked from it
class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }
  start() {
    console.log(this.brand + " is starting...");
  }
}

const car1 = new Car("Tesla", "Red");
car1.start(); // Tesla is starting...
  

🏗️ Constructors

Constructors initialize object properties. They set up initial values when an object is created.

 
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const person1 = new Person("Ayush", 25);
console.log(person1.name); // Ayush
  

🛠️ Parameterized Constructors

Constructors can accept arguments to customize objects.

 
class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }
}
const car1 = new Car("Toyota", "White");
console.log(car1.color); // White
  

💡 Key Concepts in OOP

• Class: Template for creating objects
• Object: Instance of a class
• Properties: Data describing the object
• Methods: Actions the object can perform

🛒 Real-World Example: Shopping Cart

Just like in Amazon or Flipkart — you add, remove, or clear items from your cart. Here, a ShoppingCart class manages all actions.

 
const cart = new ShoppingCart();
cart.addItem("Laptop");
cart.addItem("Phone");
cart.viewCart();
  

Objects • Classes • Constructors • Shopping Cart Demo (Real-World Use Case)

 
class ShoppingCart {
  constructor() {
    this.items = new Map();
  }

  addItem(itemName, quantity = 1) {
    const currentQty = this.items.get(itemName) || 0;
    this.items.set(itemName, currentQty + quantity);
    return `✅ ${itemName} (x${quantity}) added. Total: ${this.items.get(itemName)}`;
  }

  removeItem(itemName) {
    if (this.items.has(itemName)) {
      this.items.delete(itemName);
      return `🗑️ ${itemName} removed from the cart.`;
    }
    return `⚠️ ${itemName} not found in cart.`;
  }

  viewCart() {
    if (this.items.size === 0) return "🛒 Cart is empty.";
    return "🛍️ Items in Cart:\n" + Array.from(this.items.entries())
      .map(([name, qty]) => `• ${name} (x${qty})`).join("\n");
  }

  clearCart() {
    this.items.clear();
    return "🧹 Cart cleared successfully.";
  }
}
    

Output will appear here...