JavaScript Classes, Inheritance & Constructors

When you first start with JavaScript, you primarily work with functions and objects. But as your applications grow, you need a way to organize your code, create reusable "blueprints," and manage complex relationships. This is where **Object-Oriented Programming (OOP)** comes in.

JavaScript has always been object-oriented, but its implementation was unique. It uses **prototypal inheritance**, where objects inherit directly from other objects. The ES6 (2015) `class` syntax didn't introduce a new OOP model; rather, it provided a much cleaner, more _syntactic sugar_ over this existing prototype system.

The Old Way: Prototype Chains

Before `class`, you would create a "constructor function" and add methods to its `prototype` property.

// 1. The constructor function
function Animal(name) {
  this.name = name;
}

// 2. Add methods to the prototype
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
}

// 3. Inheritance (The complicated part)
function Dog(name, breed) {
  // Call the parent constructor
  Animal.call(this, name);
  this.breed = breed;
}

// Link the prototypes
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Add new method
Dog.prototype.speak = function() {
  console.log(this.name + ' barks.');
}

const d = new Dog('Fido', 'Lab');
d.speak(); // "Fido barks."

This was powerful but also verbose, confusing (especially `Object.create` and resetting the `constructor`), and prone to errors.

The New Way: `class` Syntax

The `class` keyword cleans this up immensely, making the code more readable and familiar to developers from other OOP languages like Java or Python.

// 1. The base class
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

// 2. Inheritance (Clean and simple)
class Dog extends Animal {
  constructor(name, breed) {
    // 3. Call parent constructor
    super(name);
    this.breed = breed;
  }

  // 4. Override method (Polymorphism)
  speak() {
    console.log(this.name + ' barks.');
  }
}

const d = new Dog('Fido', 'Lab');
d.speak(); // "Fido barks."

Core OOP Pillars in JavaScript

The `class` syntax makes it easier to implement the four main pillars of OOP:

• Encapsulation: Bundling data (properties) and methods that operate on that data within one unit (the class). Modern JS even allows for true **private fields** using the `#` prefix, which hides data from outside the class.

  class Wallet {
    #balance = 0; // Private field
  
    deposit(amount) {
      this.#balance += amount;
    }
  }

• Inheritance: Allowing a new class (child/subclass) to inherit properties and methods from an existing class (parent/superclass). This is done with `extends` and `super`.
• Polymorphism: (Greek for "many forms") The ability for a child class to **override** a method from its parent. In our example, `Dog`'s `speak()` method overrides `Animal`'s `speak()` method.
• Abstraction: Hiding complex implementation details and showing only the essential features. A `class` itself is a form of _abstraction_. We don't need to know *how* the `Dog` class works internally to use it.

Advanced Features: `static` and `get`/`set`

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}
// Called on the class
const sum = MathUtil.add(2, 3);

class User {
  constructor(first, last) {
    this.first = first;
    this.last = last;
  }
  get fullName() {
    return this.first + ' ' + this.last;
  }
}
const u = new User('John', 'Doe');
console.log(u.fullName); // "John Doe"

Key Takeaway: Always use `class` syntax in modern JavaScript for OOP. It simplifies the complex prototype system, makes your code more readable, and aligns JavaScript with standard OOP patterns, leading to more maintainable and scalable applications.