ECMAScript Classes

The introduction of the class keyword in ECMAScript 2015 (ES6) marked a significant milestone in the evolution of JavaScript. It provided a more structured and readable syntax that aligns closely with traditional Object-Oriented Programming (OOP) languages. While it is important to understand that classes in JavaScript are essentially syntactic sugar over the language's existing prototype-based inheritance model, they offer a much cleaner way to organize code, manage state, and implement complex logic.
A class acts as a blueprint for creating objects. It encapsulates data (properties) and behavior (methods) into a single unit. You declare a class using the class keyword, and within its body, you define the logic for how instances of that class should behave.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const p = new Person('Alice', 25);
p.sayHello(); // Hello, my name is Alice

When working with classes, there are several technical nuances to keep in mind:

• The constructor Method: This is a special method used for initializing new objects. It is automatically invoked when you use the new keyword. If you do not explicitly define a constructor, JavaScript provides a default empty one.
• Prototype-Based Efficiency: Methods defined within a class are not copied to every instance. Instead, they are attached to the class's prototype. This ensures that all instances share the same function reference, which is highly memory-efficient.
• No Hoisting: Unlike function declarations, class declarations are not hoisted. You must declare a class before you attempt to instantiate it, or the engine will throw a ReferenceError.
• Strict Mode by Default: The code inside a class body is automatically executed in strict mode, which helps prevent common coding errors and improves performance.
• The Nature of Classes: Despite the syntax, typeof ClassName will return "function", confirming that a class is still a specialized type of function in the JavaScript engine.

Accessor Properties: Getters and Setters

To provide better control over how object properties are accessed or modified, ECMAScript allows the use of accessors via the get and set keywords. These allow you to intercept property reads and writes, enabling you to add validation logic or compute values on the fly.

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }

  set diameter(value) {
    this.radius = value / 2;
  }
}

const c = new Circle(2);
console.log(c.area);      // 12.566...
c.diameter = 10;
console.log(c.radius);    // 5

In this example, area is a computed property that behaves like a regular field but is actually calculated whenever it is accessed. Similarly, diameter acts as a setter that updates the internal radius state.

Static Members

Not every method or property needs to belong to a specific instance of a class. Sometimes, functionality is more relevant to the class itself—for instance, utility functions or configuration constants. For these cases, we use the static keyword.

class MathUtils {
  static PI = 3.14159;

  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.PI);         // 3.14159
console.log(MathUtils.square(4));  // 16

Static members are called directly on the class name rather than on an instance created via new. Within a static method, the this keyword refers to the class itself, allowing static methods to interact with other static properties or methods.

Implementing Inheritance

Inheritance is a core pillar of OOP, allowing one class to derive properties and methods from another. In ECMAScript, this is achieved using the extends keyword. To access the parent class's constructor or methods, we use the super keyword.

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Must call super() before accessing 'this'
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} (${this.breed}): Woof!`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.eat();  // Buddy is eating.
dog.bark(); // Buddy (Golden Retriever): Woof!

There are critical rules to follow when implementing inheritance:

1. The super() Requirement: In a derived class (subclass), you must call super() within the constructor before you can use the this keyword. This ensures the parent class has properly initialized the instance.
2. Method Overriding and Reuse: super is not limited to constructors; it can also be used within regular methods to call a version of the method defined in the parent class, allowing for elegant method overriding.
3. The Prototype Chain: Inheritance is not just a syntactic convenience; it establishes a real prototype chain relationship where Object.getPrototypeOf(Dog) === Animal.

Encapsulation with Private Fields

For years, JavaScript developers relied on conventions (such as prefixing a property with an underscore, e.g., _balance) to signal that a property was intended to be private. However, these were merely suggestions and did not provide true security.

With the arrival of ECMAScript 2022, true encapsulation was introduced through private fields, denoted by the # prefix. These fields are inaccessible from outside the class body, providing a robust way to hide internal state.

class BankAccount {
  #balance = 0; // Private field

  deposit(amount) {
    if (amount <= 0) throw new Error('Amount must be positive');
    this.#balance += amount;
  }

  get balance() {
    return this.#balance;
  }
}

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

Additionally, the introduction of class fields allows you to declare properties directly in the class body (as seen with #balance = 0). This removes the need to assign every single property inside the constructor, leading to cleaner and more concise class definitions.

Summary

The modern ECMAScript class system provides a comprehensive toolkit for building scalable and maintainable applications. By leveraging constructor for initialization, get/set for controlled access, static for utility logic, extends for hierarchical structures, and # for strict encapsulation, developers can write code that is both expressive and robust. Mastering these features is essential for any professional JavaScript engineer working in modern software development.