Emulating Traditional OOP Constructs with JavaScript Classes

Object-Oriented Programming (OOP) is a paradigm based on the concept of "objects," which are data structures encapsulating data and functions together. Traditional OOP languages like Java, C++, or C# support constructs like classes, inheritance, and encapsulation explicitly. However, JavaScript, though primarily a prototype-based language, can emulate these OOP constructs using the class syntax introduced in ECMAScript 2015.

Understanding JavaScript Classes

JavaScript classes provide a much simpler and clearer syntax to create objects and handle inheritance. Note that under the hood, classes in JavaScript are syntactic sugar over the existing prototypes system.

Defining a Class

We begin by defining a simple class for demonstration. Suppose we want to create a class representing a traditional Car.

class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
  }

  displayInfo() {
    return `${this.brand} ${this.model} (${this.year})`;
  }
}

In the example above, we defined a JavaScript class, Car, with a constructor that initializes several properties. We also added a method displayInfo which returns a formatted string containing the car’s details.

Instantiating a Class

Once a class is defined, creating objects (or instances) is straightforward.

const myCar = new Car('Toyota', 'Corolla', 2020);
console.log(myCar.displayInfo()); // Output: Toyota Corolla (2020)

The new keyword is used to create an instance of the Car class. The displayInfo method is then called on myCar, which logs the result to the console.

Inheritance

JavaScript classes allow the use of inheritance, a core concept in traditional OOP. By using the extends keyword, one class can inherit properties and methods from another.

class ElectricCar extends Car {
  constructor(brand, model, year, batteryCapacity) {
    super(brand, model, year);
    this.batteryCapacity = batteryCapacity;
  }

  displayBattery() {
    return `Battery Capacity: ${this.batteryCapacity} kWh`;
  }
}

const myTesla = new ElectricCar('Tesla', 'Model S', 2022, 100);
console.log(myTesla.displayInfo()); // Output: Tesla Model S (2022)
console.log(myTesla.displayBattery()); // Output: Battery Capacity: 100 kWh

In this example, ElectricCar inherits from the Car class. We also added a new property, batteryCapacity, and a method displayBattery. Use super() to invoke the parent class’s constructor.

Encapsulation

Encapsulation refers to the bundling of data with the code that operates on that data. JavaScript achieved full encapsulation with the introduction of private fields in ES2020.

Below is how encapsulation is typically done:

class PrivateCar {
  #brand;
  #model;
  #year;

  constructor(brand, model, year) {
    this.#brand = brand;
    this.#model = model;
    this.#year = year;
  }

  getDetails() {
    return `${this.#brand} ${this.#model} (${this.#year})`;
  }
}

const myPrivateCar = new PrivateCar('Ford', 'Mustang', 2019);
console.log(myPrivateCar.getDetails()); // Output: Ford Mustang (2019)

Here, we use the # sign to declare private fields in the class, making properties #brand, #model, and #year inaccessible from outside the class.

Conclusion

Even though JavaScript is not a traditional OOP language, its class syntax makes it possible to leverage a familiar OOP style. By understanding how to define classes, implement inheritance, and use encapsulation, developers can write clear, organized, and maintainable code in JavaScript much in the same way they would in traditional class-based languages.