JavaScript Classes and OOP | Learn Computer Academy

(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:

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