JavaScript Classes and OOP (Object-Oriented Programming)

(Modeling real-world data using objects and blueprints)

What is Object-Oriented Programming?

Object-Oriented Programming (OOP) is a programming style based on objects. JavaScript supports OOP using both constructor functions and ES6 classes.

Key OOP concepts:

  • Class: A blueprint/template
  • Object: An instance of a class
  • Constructor: Special function that initializes an object
  • Method: A function inside an object
  • Inheritance: One class inherits properties/methods from another

Creating Classes

ES6 Class Syntax

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
                                
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
                                
const alice = new Person("Alice", 25);
alice.greet(); // Hello, my name is Alice
  • constructor() is called automatically when creating a new object using new.
  • this refers to the new object being created.

Inheritance (Extending a Class)

You can create a child class that inherits from a parent class using extends.

class Employee extends Person {
  constructor(name, age, role) {
    super(name, age); // Calls parent constructor
    this.role = role;
  }
                                
  work() {
    console.log(`${this.name} is working as a ${this.role}`);
  }
}
                                
const bob = new Employee("Bob", 30, "Developer");
bob.greet(); // Hello, my name is Bob
bob.work();  // Bob is working as a Developer

Encapsulation (Private Properties)

JavaScript supports private fields using # syntax (ES2022+).

class BankAccount {
  #balance = 0;
                                
  deposit(amount) {
    this.#balance += amount;
  }
                                
  getBalance() {
    return this.#balance;
  }
}
                                
const acc = new BankAccount();
acc.deposit(1000);
console.log(acc.getBalance()); // 1000
// console.log(acc.#balance); // ❌ Error: Private field

Method Overriding

Child classes can override parent methods:

class Animal {
  speak() {
    console.log("Animal makes a sound");
  }
}
                                
class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}
                                
const d = new Dog();
d.speak(); // Dog barks

Class vs Constructor Function

Feature Constructor Function ES6 Class Syntax
Syntax Function-based Cleaner, class-based
Inheritance Via prototype Using extends, super
Private fields Not supported (older) Supported with #
Readability Moderate Better

Real-Life Analogy

Think of a Car class as a blueprint.

Each object created from it (like myCar, yourCar) is an actual car with its own data but follows the same design.

Summary

  • Classes are blueprints for creating objects.
  • Use constructor() to initialize values.
  • Inheritance allows code reuse with extends and super().
  • Use # for private fields (ES2022+).
  • OOP helps organize code better using objects and relationships.

🧪 Practice Exercise:

Task:

  1. Create a Book class with title, author, and a getSummary() method.
  2. Extend Book into a Magazine class with an extra issue property.
  3. Create a class with a private field #password and methods to change it.
  4. Try method overriding in a class hierarchy (e.g., Animal → Dog → Bulldog).
  5. Make a class that counts how many objects were created from it.
Previous Next