📘 JavaScript Classes

✅ 1. What Is a Class?

A class in JavaScript is a blueprint for creating objects with shared structure (properties) and behavior (methods).

Introduced in ES6, classes simplify prototype-based inheritance.

📌 2. Basic Class Syntax

jsCopyEditclass Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

const p1 = new Person("Alice", 30);
p1.greet(); // Hi, I'm Alice and I'm 30 years old.

📌 3. Constructor Method

• The constructor() is a special method for initializing new objects.
• Runs automatically when new is used.

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

📌 4. Adding Methods

jsCopyEditclass Dog {
  bark() {
    console.log("Woof!");
  }
}

const d = new Dog();
d.bark(); // Woof!

🧠 Methods are placed on the class’s prototype, not copied per instance.

📌 5. Class Inheritance (extends, super)

jsCopyEditclass Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const d = new Dog("Buddy");
d.speak(); // Buddy barks.

Use super() to call the parent class’s constructor or methods.

📌 6. Getters and Setters

jsCopyEditclass Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.height * this.width;
  }

  set area(a) {
    console.log("Can't set area directly!");
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 50

📌 7. Static Methods

Static methods belong to the class, not instances.

jsCopyEditclass MathHelper {
  static square(x) {
    return x * x;
  }
}

console.log(MathHelper.square(4)); // 16

📌 8. Private Fields (#) (ES2022)

jsCopyEditclass Secret {
  #code = "12345";

  getCode() {
    return this.#code;
  }
}

const s = new Secret();
console.log(s.getCode()); // 12345
// console.log(s.#code); // ❌ SyntaxError

📌 9. Class Expressions

You can define a class as an expression and assign it to a variable:

jsCopyEditconst Vehicle = class {
  drive() {
    console.log("Driving...");
  }
};

const v = new Vehicle();
v.drive();

🧪 Practice Tasks

1. Create a User class with name and email, and a showInfo() method.
2. Create a Shape base class and a Circle subclass that overrides getArea().
3. Add a static method isAdult(age) to a Person class.

🧠 Quick Reference Table

Would you like:

• 📄 A printable PDF or cheatsheet of this tutorial?
• 💻 An interactive class builder (CodePen or JSFiddle)?
• 🧠 A quiz or coding challenge set on classes?