Private field inspection

Background of ECMAScript 13 Private Field Checks

ECMAScript 13 introduced stricter private field checking mechanisms, further refining the class private fields feature. Private fields are identified by the # prefix, ensuring field privacy at the language level. The new features primarily address edge cases in earlier implementations, such as private field access in inheritance chains and the behavior of static private fields.

Basic Syntax of Private Fields

Private fields must be explicitly declared within the class and cannot be accessed outside the class. Here’s a basic example:

class Counter {
  #count = 0; // Private field

  increment() {
    this.#count++;
  }

  getCount() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.#count); // SyntaxError: Private field '#count' must be declared in an enclosing class

Inheritance and Checks for Private Fields

ECMAScript 13 clarifies the behavior of private fields in inheritance chains. Subclasses cannot directly access private fields of the parent class unless the parent explicitly exposes access methods:

class Parent {
  #secret = "confidential";

  getSecret() {
    return this.#secret;
  }
}

class Child extends Parent {
  tryToAccess() {
    // console.log(this.#secret); // SyntaxError
    console.log(this.getSecret()); // Correct approach
  }
}

const child = new Child();
child.tryToAccess(); // "confidential"

New Rules for Static Private Fields

Static private fields now have more explicit checking rules. They can only be accessed through the class itself, not through instances:

class Logger {
  static #logLevel = "DEBUG";

  static setLogLevel(level) {
    this.#logLevel = level;
  }

  printLevel() {
    // console.log(this.#logLevel); // SyntaxError
    console.log(Logger.#logLevel); // Correct approach
  }
}

Logger.setLogLevel("INFO");
const logger = new Logger();
logger.printLevel(); // "INFO"

Existence Checks for Private Fields

ECMAScript 13 introduces a more reliable way to check for the existence of private fields using the in operator:

class User {
  #id;

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

  hasIdField() {
    return #id in this; // Checks if the private field exists
  }
}

const user = new User(123);
console.log(user.hasIdField()); // true

Interaction Between Private Fields and Proxy

Proxy objects cannot directly intercept private field access, which is an intentional design choice:

class SecureData {
  #value = 42;

  getValue() {
    return this.#value;
  }
}

const handler = {
  get(target, prop) {
    console.log(`Accessing: ${prop}`);
    return target[prop];
  }
};

const proxy = new Proxy(new SecureData(), handler);
proxy.getValue(); // Only logs "Accessing: getValue"; does not expose private field access

Type Checking for Private Fields

In TypeScript, type checking for private fields differs significantly from ECMAScript private fields. TypeScript's private modifier is a compile-time check, while ECMAScript's # enforces privacy at runtime:

class TSExample {
  private tsPrivate = 1;
  #ecmaPrivate = 2;

  compare() {
    console.log(this.tsPrivate); // TypeScript allows this
    console.log(this.#ecmaPrivate); // ECMAScript enforces privacy
  }
}

Performance Considerations for Private Fields

Engines optimize private fields differently from regular properties. Code that frequently accesses private fields may exhibit different performance characteristics:

class PerformanceTest {
  #cache = new Array(1000).fill(0);

  accessPublic() {
    const start = performance.now();
    for (let i = 0; i < this.#cache.length; i++) {
      this.publicMethod();
    }
    return performance.now() - start;
  }

  accessPrivate() {
    const start = performance.now();
    for (let i = 0; i < this.#cache.length; i++) {
      this.#privateMethod();
    }
    return performance.now() - start;
  }

  publicMethod() {}
  #privateMethod() {}
}

const test = new PerformanceTest();
console.log(test.accessPublic());
console.log(test.accessPrivate());

Serialization Behavior of Private Fields

Private fields are excluded from serialization by default, unlike regular properties:

class Serializable {
  publicField = 1;
  #privateField = 2;

  toJSON() {
    return {
      publicField: this.publicField,
      // privateField: this.#privateField // Typically should be explicitly excluded
    };
  }
}

const obj = new Serializable();
console.log(JSON.stringify(obj)); // {"publicField":1}

Potential Conflicts Between Private Fields and Decorators

When decorators encounter private fields, access restrictions must be noted. Decorators cannot directly modify private fields:

function logAccess(target, name, descriptor) {
  const original = descriptor.get;
  descriptor.get = function() {
    console.log(`Accessing ${name}`);
    return original.call(this);
  };
  return descriptor;
}

class DecoratorExample {
  #value = 10;

  @logAccess
  get value() {
    return this.#value;
  }
}

const example = new DecoratorExample();
console.log(example.value); // Logs the access and then returns 10

Debugging Support for Private Fields

Modern developer tools handle private fields with special visual treatment, often with clear identifiers:

class DebugExample {
  #debugInfo = "internal state";

  breakHere() {
    debugger; // When inspecting `this` in the console, #debugInfo will be visible
    return this.#debugInfo;
  }
}

new DebugExample().breakHere();

Private Fields in Class Expressions

Private fields are equally valid in class expressions, behaving the same as in class declarations:

const Factory = class {
  #instanceId = Math.random();

  getId() {
    return this.#instanceId;
  }
};

const obj1 = new Factory();
const obj2 = new Factory();
console.log(obj1.getId() !== obj2.getId()); // true

Method Binding for Private Fields

Private field methods require special attention to this binding:

class EventHandler {
  #callback() {
    console.log(this);
  }

  register() {
    // document.addEventListener('click', this.#callback); // Error: `this` is lost
    document.addEventListener('click', this.#callback.bind(this));
  }
}

Private Fields and the Mixin Pattern

Private fields complicate traditional Mixin pattern implementations because external code cannot access these fields:

const TimestampMixin = (Base) => class extends Base {
  #createdAt = Date.now();

  getCreationTime() {
    return this.#createdAt;
  }
};

class User extends TimestampMixin(Object) {
  #userId;

  constructor(id) {
    super();
    this.#userId = id;
  }
}

const user = new User(123);
console.log(user.getCreationTime()); // Timestamp