💻 JavaScript Object-Oriented Programming (OOP) Tutorial

Object-Oriented Programming (OOP) is a programming paradigm that uses objects—data structures consisting of data fields and methods—to design applications and computer programs.

JavaScript is a multi-paradigm language that supports OOP principles, making it a powerful tool for building complex, scalable applications.

This tutorial will guide you through the core concepts of OOP in modern JavaScript, primarily using ES6 Classes.

1. 🧱 Objects and Classes

The fundamental concept of OOP is the Class, which acts as a blueprint for creating Objects.

A. Objects

An object is an instance of a class, representing a real-world entity. In JavaScript, you can create objects using literal notation, constructor functions, or classes.

// Object Literal Notation
const car = {
  make: "Honda",
  model: "Civic",
  year: 2020,
  start: function() {
    console.log("Engine started!");
  }
};

console.log(car.make); // Output: Honda
car.start();          // Output: Engine started!

B. Classes (The Blueprint)

ES6 introduced the class keyword, which provides a much cleaner and more familiar syntax for creating blueprints.

// 
class Vehicle{
  // 1. The constructor method is called when a new object is created.
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  // 2. A method (function) that all Vehicle objects will have
  getDetails() {
    return `${this.year} ${this.make} ${this.model}`;
  }
}

// Creating a new object (instantiation)
const myCar = new Vehicle("Toyota", "Camry", 2022);

console.log(myCar.getDetails()); // Output: 2022 Toyota Camry

2. 🔑 The Four Pillars of OOP

OOP is built upon four main principles: Encapsulation, Abstraction, Inheritance, and Polymorphism.

A. Encapsulation (Bundling Data and Methods)

Encapsulation means bundling the data (properties) and the methods (functions) that operate on that data into a single unit (the object/class). It also involves restricting direct access to some of an object’s components, which is crucial for preventing accidental modification.

• In JavaScript: Traditionally, JavaScript has not had true private properties. Developers use conventions, like prefixing a property with an underscore (_), to signal that it should be treated as private.

• Modern JavaScript (ES2020+): You can now define truly private class fields using the # prefix.

class BankAccount{
  #balance = 0; // Truly private field

  constructor(initialDeposit) {
    if (initialDeposit > 0) {
      this.#balance = initialDeposit;
    }
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  // A method (public interface) to safely retrieve the private data
  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // SyntaxError: Private field '#balance' must be declared in an enclosing class

B. Inheritance (The “is-a” Relationship)

Inheritance allows a new class (the subclass or child class) to inherit properties and methods from an existing class (the superclass or parent class). This promotes code reusability.

• extends: Used to establish the inheritance relationship.

• super(): Used inside the subclass’s constructor to call the parent class’s constructor and initialize its properties.

// 
class Car extends Vehicle{ // Car is a subclass of Vehicle
  constructor(make, model, year, doorCount) {
    // Call the parent (Vehicle) constructor
    super(make, model, year); 
    this.doorCount = doorCount;
  }

  // A method specific to Car
  getDoorCount() {
    return `This car has ${this.doorCount} doors.`;
  }
}

const sedan = new Car("Ford", "Focus", 2018, 4);

console.log(sedan.getDetails());     // Inherited from Vehicle: 2018 Ford Focus
console.log(sedan.getDoorCount());   // Own method: This car has 4 doors.

C. Polymorphism (Many Forms)

Polymorphism allows objects to take on “many forms,” meaning a single interface (a method name) can be used to represent different implementations. The most common form in JavaScript OOP is Method Overriding.

• Method Overriding: A subclass provides its own specific implementation of a method that is already defined in its superclass.

class ElectricCar extends Car{
  constructor(make, model, year, doorCount, range) {
    super(make, model, year, doorCount);
    this.range = range;
  }

  // Method Overriding: Overrides the getDetails() method from Vehicle/Car
  getDetails() {
    // We can call the parent's method using super
    const carDetails = super.getDetails(); 
    return `${carDetails} and has a ${this.range} mile range.`;
  }
}

const tesla = new ElectricCar("Tesla", "Model 3", 2024, 4, 333);

// The getDetails() method is called, but the specific implementation 
// from ElectricCar is executed.
console.log(tesla.getDetails()); 
// Output: 2024 Tesla Model 3 and has a 333 mile range.

D. Abstraction (Hiding Complexity)

Abstraction is the concept of showing only essential information and hiding complex implementation details.

In JavaScript:

• Classes/Objects achieve abstraction by providing public methods (like getBalance() or getDetails()) that serve as a simple, high-level interface, while the internal logic (like how #balance is updated) remains hidden.

• By using methods to interact with data (Encapsulation), you naturally implement Abstraction.

3. 📝 Summary of OOP Terms

Useful links below: