Modern JavaScript OOP Features

1. Class syntax

// language: javascript
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
• https://caniuse.com/es6-class

2. Class fields 

• Instance Fields: These are defined directly on each instance of the class. They can be initialized with a default value or left undefined.
• Static Fields: These are defined with the static keyword and belong to the class itself, not its instances.

// language: javascript
class Person {
  country = "Viet Nam";      // Instance field — each object gets its own "country"
  static count = 0;          // Static field — shared across all instances
}

const john = new Person();

console.log(Person.count);    // 0  -> Accessing static field on the class
console.log(Person.country);  // undefined
console.log(john.country);    // Viet Nam -> Accessing instance field on the object
console.log(john.count);      // undefined

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields
• https://caniuse.com/mdn-javascript_classes_public_class_fields

3. Private fields and methods with #

// language: javascript
class BankAccount {
  #balance = 0;

  constructor(owner) {
    this.owner = owner;
  }

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

  getBalance() {
    return this.#balance;
  }

  #isPositive(value) {
    return typeof value === "number" && value > 0;
  }
}

const account = new BankAccount("Nam");
account.deposit(100);
console.log(account.getBalance()); // 100
console.log(account.#balance); // ❌ Error
console.log(account.#isPositive(5)); // ❌ Error

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties
• https://caniuse.com/mdn-javascript_classes_private_class_fields

4. Getters and setters

// language: javascript
class Product {
  #price = 0;

  get price() {
    return `$${this.#price.toFixed(2)}`;
  }

  set price(value) {
    if (value < 0) throw new Error("Price can't be negative");
    this.#price = value;
  }
}

const item = new Product();
item.price = 25.5;
console.log(item.price); // $25.50

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
  
  

5. Inheritance with extends

// language: javascript
class Vehicle {
  constructor(type) {
    this.type = type;
  }
}

class Car extends Vehicle {
  constructor(brand) {
    super("car");  // Call parent constructor
    this.brand = brand;
  }

  describe() {
    console.log(`${this.brand} is a type of ${this.type}`);
  }
}

const car = new Car("Toyota");
car.describe(); // Toyota is a type of car

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends
• https://caniuse.com/mdn-javascript_classes_extends

6. Static class blocks

// language: javascript
class AppConfig {
  static version;
  static environment;

  static {
    this.version = "1.0.0";
    this.environment = process.env.NODE_ENV || "development";

    if (this.environment === "production") {
      console.log("Production mode enabled");
    }
  }
  
  constructor() {
    console.log("App initialized!");
  }
}

// Suppose process.env.NODE_ENV is null

console.log(AppConfig.version)      // 1.0.0
console.log(AppConfig.environment)  // development
new AppConfig()                     // App initialized!

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_static_initialization_blocks
• https://caniuse.com/mdn-javascript_classes_static_initialization_blocks

7. Babel plugins

// language: bash
@babel/plugin-transform-class-properties
@babel/plugin-transform-private-methods
@babel/plugin-transform-private-property-in-object
@babel/plugin-transform-class-static-block

7. Conclusion