⚙️ 2. Creating Classes
A class is a blueprint for creating objects.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age}.`);
}
}
✅ The constructor()
runs automatically when you create a new instance.
✅ this
refers to the current object.
🧩 3. Creating Objects (Instances)
const person1 = new Person("Alice", 25);
person1.greet(); // Hello, my name is Alice and I'm 25.
Every new
object gets its own name
and age
, but shares methods (efficient memory usage).
⚡ 4. Adding Methods
You can define as many methods as you want inside a class — no commas needed:
class Car {
constructor(brand) {
this.brand = brand;
}
start() {
console.log(`${this.brand} is starting...`);
}
stop() {
console.log(`${this.brand} stopped.`);
}
}
const car = new Car("Tesla");
car.start();
car.stop();
🧬 5. Class Inheritance (Extends)
You can create subclasses using extends
.
class 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 dog = new Dog("Rex");
dog.speak(); // Rex barks.
✅ extends
lets the child class inherit properties and methods from the parent.
✅ You can override methods (as seen above).
🔁 6. Using super()
If the subclass has its own constructor
, it must call super()
first — to call the parent’s constructor.
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // calls parent constructor
this.breed = breed;
}
info() {
console.log(`${this.name} is a ${this.breed}.`);
}
}
const dog = new Dog("Buddy", "Labrador");
dog.info(); // Buddy is a Labrador.
🧰 7. Getters & Setters
Use get and set for computed or validated properties.
class User {
constructor(name) {
this._name = name;
}
get name() {
return this._name.toUpperCase();
}
set name(newName) {
if (newName.length < 3) {
console.log("Name too short!");
} else {
this._name = newName;
}
}
}
const user = new User("Alice");
console.log(user.name); // ALICE
user.name = "Bo"; // Name too short!
🧱 8. Static Methods
Static methods belong to the class itself, not instances.
class MathHelper {
static add(a, b) {
return a + b;
}
}
console.log(MathHelper.add(5, 3)); // 8
✅ You call them with the class name (MathHelper.add()
), not from an object.
🪄 9. Private Fields (Modern JS)
You can create truly private properties using #
.
class Account {
#balance = 0; // private field
deposit(amount) {
this.#balance += amount;
}
getBalance() {
return this.#balance;
}
}
const acc = new Account();
acc.deposit(100);
console.log(acc.getBalance()); // 100
// console.log(acc.#balance); ❌ Error: private field
✅ Great for encapsulation (data protection).
🧩 10. Example: Full OOP Implementation
class Vehicle {
constructor(type, brand) {
this.type = type;
this.brand = brand;
}
describe() {
console.log(`This is a ${this.brand} ${this.type}.`);
}
}
class Car extends Vehicle {
constructor(brand, model) {
super("car", brand);
this.model = model;
}
describe() {
super.describe();
console.log(`Model: ${this.model}`);
}
}
const myCar = new Car("Tesla", "Model 3");
myCar.describe();
✅ Output:
This is a Tesla car.
Model: Model 3
🧠 11. Key OOP Principles in JS
Principle | Meaning | Example |
---|---|---|
Encapsulation | Keep data private and expose only necessary parts | #privateField , getters/setters |
Abstraction | Hide complexity, show simple interface | Class methods like .deposit() |
Inheritance | Share behavior across classes | class Dog extends Animal |
Polymorphism | Override or redefine behavior | Dog.speak() overrides Animal.speak() |
🚀 12. Summary
Feature | Description | Example |
---|---|---|
Class | Template for objects | class User {} |
Constructor | Initializes properties | constructor(name) {} |
Method | Function inside a class | greet() {} |
Inheritance | Extend base class | class Dog extends Animal {} |
super() | Call parent constructor/method | super(name) |
Static | Belongs to class, not object | Class.method() |
Private field | Hidden property | #balance |
Getter/Setter | Control access | get name() , set name() |