JavaScript Classes: Building Objects with Modern Class Syntax

class Student {
  constructor(name, age) {
    // runs automatically on "new"
    this.name = name;
    // attach data to the new instance
    this.age = age;
  } introduce() {
    // shared method — lives on the prototype
    return `Hi, I'm ${this.name}, ${this.age} 👋`;
  }
}const s1 = new Student("Priya", 22);
// ✅ always with new
const s2 = new Student("Amit", 24);
console.log(s1.introduce());
// "Hi, I'm Priya, 22 👋"
console.log(s1.introduce === s2.introduce);
// true — one shared copy (Lesson 48!)

const s = Student("Priya", 22);
// ❌ TypeError — classes REQUIRE new
class student {
} // ⚠️ legal but breaks convention — Capitalize!

class ShoppingCart {
  items =[];
  // 🌱 field — every instance starts with []
  created = new Date();
  // 🌱 initialized at construction time
  #discountApplied = false;
  // 🔒 private field (more below!)
  constructor(owner) {
    this.owner = owner;
    // constructor now handles only arguments
  } addItem(item) {
    this.items.push(item);
    // array method from Lesson 50!
    console.log(`➕ ${item} added (${this.items.length} items)`);
  }
}const cart = new ShoppingCart("Priya");
cart.addItem("Keyboard");
// ➕ Keyboard added (1 items)
cart.addItem("Mouse");
// ➕ Mouse added (2 items)
console.log(cart.items);
// ["Keyboard", "Mouse"] ✅

class ClickCounter {
  count = 0;
  // 🏹 arrow field — this is locked to the instance FOREVER:
  increment =() => {
    this.count++;
    console.log(`Clicks: ${this.count}`);
  };
}const counter = new ClickCounter();
const btn = document.getElementById("myBtn");
btn.addEventListener("click", counter.increment);
// ✅ borrowed, still works!
// (Lesson 29's callback disaster — completely prevented)

class BankAccount {
  #balance = 0;
  // 🔒 private FIELD
  #pin;
  // declared private, set in constructor
  constructor(owner, pin) {
    this.owner = owner;
    // 🌍 public
    this.#pin = pin;
    // 🔒 private
  } // 🔒 private METHOD — only callable from inside the class:
  #verifyPin(attempt) {
    return attempt === this.#pin;
  } withdraw(amount, pin) {
    if (!this.#verifyPin(pin)) {
      // internal use only ✅
      console.log("❌ Wrong PIN!");
      return;
    } if (amount > this.#balance) {
      console.log("❌ Insufficient funds");
      return;
    } this.#balance -= amount;
    console.log(`💸 Withdrew ₹${amount}. Balance: ₹${this.#balance}`);
  } deposit(amount) {
    this.#balance += amount;
    console.log(`💰 Balance: ₹${this.#balance}`);
  }
}const acc = new BankAccount("Priya", "4321");
acc.deposit(1000);
// 💰 Balance: ₹1000
acc.withdraw(300, "4321");
// 💸 Withdrew ₹300. Balance: ₹700
acc.withdraw(300, "0000");
// ❌ Wrong PIN!
acc.#balance;
// ❌ SyntaxError — truly private!
acc.#verifyPin("4321");
// ❌ SyntaxError — private method too!

class Player {
  static totalPlayers = 0;
  // 🏛️ static FIELD — one shared value
  constructor(name) {
    this.name = name;
    Player.totalPlayers++;
    // count every creation!
  } // 🏛️ static METHOD — called on the class, not instances:
  static resetCounter() {
    Player.totalPlayers = 0;
    console.log("Counter reset 🔄");
  } static createGuest() {
    // 🏛️ factory method!
    return new Player(`Guest${Player.totalPlayers + 1}`);
  }
}const p1 = new Player("Priya");
const p2 = new Player("Amit");
const p3 = Player.createGuest();
// 🏭 factory-created!
console.log(Player.totalPlayers);
// 3 ✅ — the class counts its children
console.log(p3.name);
// "Guest3"
Player.resetCounter();
// Counter reset 🔄
console.log(Player.totalPlayers);
// 0
// ⚠️ statics are INVISIBLE to instances:
p1.totalPlayers;
// undefined — instances can't see statics!
Player.createGuest();
// ✅ statics live on the CLASS

class Circle {
  #radius;
  constructor(radius) {
    this.radius = radius;
    // goes through the setter ✅
  } get radius() {
    // 📖 read
    return this.#radius;
  } set radius(value) {
    // ✏️ write — with a bouncer
    if (value <= 0) throw new Error("Radius must be positive! 🚫");
    this.#radius = value;
  } get area() {
    // 🧮 computed — always fresh
    return (Math.PI * this.#radius ** 2).toFixed(2);
  }
}const c = new Circle(7);
console.log(c.area);
// "153.94" ✅
c.radius = 10;
console.log(c.area);
// "314.16" — recomputed automatically!
c.radius = -5;
// ❌ Error: Radius must be positive! 🚫

const action = "jump";
class Player {
[action]() {
    // 🎭 a method named by a variable!
    console.log("Jumping! 🦘");
  }
}new Player().jump();
// "Jumping! 🦘"

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  } start() {
    return `${this.brand} engine on 🔑`;
  }
}class ElectricCar extends Vehicle {
  #battery = 100;
  // child's own private field
  constructor(brand, range) {
    super(brand);
    // ☎️ FIRST — before any "this"!
    this.range = range;
  } start() {
    // 🎭 override (polymorphism!)
    return `${this.brand} boots silently ⚡ (${this.#battery}% battery)`;
  } describe() {
    return `${super.start()} + electric mode`;
    // ☎️ call the parent's version!
  }
}const tesla = new ElectricCar("Tesla", 450);
console.log(tesla.start());
// "Tesla boots silently ⚡ (100% battery)"
console.log(tesla.describe());
// "Tesla engine on 🔑 + electric mode"

// ✅ TaskManager — fields, private, static, getters, everything
class TaskManager {
  static totalTasks = 0;
  // 🏛️ class-level counter
  #tasks =[];
  // 🔒 private task list
  constructor(owner) {
    this.owner = owner;
  } addTask(title) {
    const task = {
      id: TaskManager.totalTasks + 1, title: title.trim(), // Lesson 52's string cleanup!
      done: false
    };
    this.#tasks.push(task);
    TaskManager.totalTasks++;
    console.log(`➕ "${task.title}" added (#${task.id})`);
  } completeTask(id) {
    const task = this.#tasks.find(t => t.id === id);
    // Lesson 50's find!
    if (!task) {
      console.log(`❌ No task with id ${id}`);
      return;
    } task.done = true;
    console.log(`✅ "${task.title}" completed!`);
  } get pending() {
    // 📖 computed property
    return this.#tasks.filter(t => !t.done);
  } get summary() {
    const done = this.#tasks.length - this.pending.length;
    return `${done}/${this.#tasks.length} done 📊`;
  } static compareProgress(managerA, managerB) {
    // 🏛️ static utility
    return managerA.pending.length <= managerB.pending.length ? `${managerA.owner} is more on top of things! 🏆` : `${managerB.owner} is more on top of things! 🏆`;
  }
}const priya = new TaskManager("Priya");
priya.addTask("  Finish lesson 55  ");
priya.addTask("Build a project");
priya.completeTask(1);
console.log(`Progress: ${priya.summary}`);
// "Progress: 1/2 done 📊"
console.log(`Pending: ${priya.pending.length} task(s)`);
// 1
console.log(TaskManager.totalTasks);
// 2
// priya.#tasks;                                  // ❌ private!

➕ "Finish lesson 55" added(#1)➕ "Build a project" added(#2)✅ "Finish lesson 55" completed!Progress: 1/2 done 📊Pending: 1 task(s)2

class Example extends Parent {
  // 🌱 Fields
  instanceField = "default";
  #privateField = "hidden";
  static staticField = "shared";
  // 🏗️ Constructor
  constructor(arg) {
    super(arg);
    // if extending — always first!
    this.arg = arg;
  } // 📦 Methods
  method() {
  } #privateMethod() {
  } // 🔒
  static staticMethod() {
  } // 🏛️
  arrowField =() => {
  };
  // 🏹 this-safe field
  // 🚪 Accessors
  get prop() {
  } set prop(v) {
  }
}