Understanding Internal Properties in JavaScript Classes: Examples and Best Practices

JavaScript classes are a fundamental tool for organizing and encapsulating code, and the use of internal properties is a powerful way to take your coding skills to the next level. In this blog post, we will explore some examples of internal properties in JavaScript classes, and how they can help you create more robust and maintainable code.

First, let’s define what we mean by “internal properties”. Internal properties are properties of a JavaScript class that are not exposed to the outside world. They are only accessible from within the class itself, and are used to store data or perform operations that are specific to the class.

One example of internal properties in JavaScript classes is the use of private fields. Private fields allow developers to define class properties that are only accessible within the class itself. This provides a way to store data that is specific to the class, and that should not be accessed or modified by other parts of the codebase.

To define a private field in a JavaScript class, you can use the hash (#) symbol before the property name, like this:

class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

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

In this example, the #name property is only accessible within the Person class. It is used to store the name of the person, which is then used in the greet method to output a personalized greeting.

Another example of internal properties in JavaScript classes is the use of static private fields. Static private fields are similar to private fields, but are associated with the class itself, rather than instances of the class. This means that they are shared across all instances of the class, but are still only accessible within the class itself.

To define a static private field in a JavaScript class, you can use the hash (#) symbol before the property name, and the static keyword before the # symbol, like this:

class Counter {
  static #count = 0;

  static increment() {
    this.#count++;
    console.log(`Count: ${this.#count}`);
  }
}

In this example, the #count property is a static private field that is associated with the Counter class. It is used to store the count of how many times the increment method has been called, and is outputted each time the method is called.

Finally, another example of internal properties in JavaScript classes is the use of the WeakMap data structure. A WeakMap is a special type of map that allows you to store data in a way that is only accessible from within the class, and is automatically garbage-collected when the class is no longer in use.

To use a WeakMap in a JavaScript class, you can define the WeakMap as an internal property of the class, like this:

const _privateData = new WeakMap();

class BankAccount {
  constructor(balance) {
    _privateData.set(this, { balance });
  }

  deposit(amount) {
    const data = _privateData.get(this);
    data.balance += amount;
  }

  withdraw(amount) {
    const data = _privateData.get(this);
    if (data.balance < amount) {
      throw new Error('Insufficient funds');
    }
    data.balance -= amount;
  }

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

In this example, the _privateData WeakMap is used to store the balance of the bank account, which is then accessed and modified by the deposit and withdraw methods. The get balance method is used to retrieve the current balance of the account.