Creating Private Class Fields in Modern JS

class User {
  // Declaration — required before using #password
  #password;
  #loginAttempts = 0;
 
  constructor(username, password) {
    this.username = username; // Public field
    this.#password = this.#hash(password); // Private
  }
 
  #hash(pwd) {
    // Private method — simplified hash for illustration
    return `hashed_${pwd}_${pwd.length}`;
  }
 
  login(password) {
    this.#loginAttempts += 1;
    if (this.#loginAttempts > 3) throw new Error("Account locked");
    return this.#hash(password) === this.#password;
  }
 
  resetPassword(oldPwd, newPwd) {
    if (!this.login(oldPwd)) throw new Error("Wrong password");
    this.#password = this.#hash(newPwd);
    this.#loginAttempts = 0;
  }
}
 
const user = new User("alice", "secret123");
console.log(user.login("secret123")); // true
console.log(user.login("wrong"));     // false
 
// These throw SyntaxError at parse time:
// console.log(user.#password);
// user.#loginAttempts = 0;

class DataFetcher {
  #cache = new Map();
  #baseUrl;
 
  constructor(baseUrl) {
    this.#baseUrl = baseUrl;
  }
 
  // Private method
  async #fetchRaw(endpoint) {
    const response = await fetch(`${this.#baseUrl}${endpoint}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  }
 
  // Private caching logic
  async #fetchCached(endpoint) {
    if (this.#cache.has(endpoint)) {
      return this.#cache.get(endpoint);
    }
    const data = await this.#fetchRaw(endpoint);
    this.#cache.set(endpoint, data);
    return data;
  }
 
  // Public API
  async getUser(id) {
    return this.#fetchCached(`/users/${id}`);
  }
 
  async getProduct(id) {
    return this.#fetchCached(`/products/${id}`);
  }
 
  clearCache() { this.#cache.clear(); }
}
 
const fetcher = new DataFetcher("https://api.example.com");
// fetcher.#fetchRaw("/users/1") → SyntaxError — private

class Circle {
  #radius;
 
  constructor(radius) {
    this.radius = radius; // Goes through public setter
  }
 
  // Public getter/setter
  get radius()  { return this.#radius; }
  set radius(r) {
    if (r < 0) throw new RangeError("Radius cannot be negative");
    this.#radius = r;
  }
 
  // Private computed helpers
  get #radiusSquared() { return this.#radius ** 2; }
 
  get area()          { return Math.PI * this.#radiusSquared; }
  get circumference() { return 2 * Math.PI * this.#radius; }
}
 
const c = new Circle(5);
console.log(c.area.toFixed(2));   // "78.54"
c.radius = 10;
console.log(c.area.toFixed(2));   // "314.16"
// c.#radiusSquared → SyntaxError

class IdGenerator {
  static #nextId = 1;
  static #prefix = "item";
 
  static generate() {
    return `${IdGenerator.#prefix}_${IdGenerator.#nextId++}`;
  }
 
  static reset() {
    IdGenerator.#nextId = 1;
  }
}
 
console.log(IdGenerator.generate()); // "item_1"
console.log(IdGenerator.generate()); // "item_2"
console.log(IdGenerator.generate()); // "item_3"
IdGenerator.reset();
console.log(IdGenerator.generate()); // "item_1"
 
// IdGenerator.#nextId → SyntaxError

class Animal {
  #species;
  constructor(species) { this.#species = species; }
 
  static isAnimal(obj) {
    return #species in obj; // Returns true only if obj has this private field
  }
}
 
class Plant {
  #genus;
  constructor(genus) { this.#genus = genus; }
}
 
const a = new Animal("Dog");
const p = new Plant("Rosa");
 
console.log(Animal.isAnimal(a)); // true
console.log(Animal.isAnimal(p)); // false
console.log(Animal.isAnimal({})); // false

class Base {
  #secret = 42;
 
  getSecret() { return this.#secret; } // Works — inside Base
}
 
class Child extends Base {
  reveal() {
    // return this.#secret; → SyntaxError: Private field '#secret' must be declared
    return this.getSecret(); // Must use parent's public method
  }
}
 
const c = new Child();
console.log(c.reveal()); // 42

// OLD: WeakMap-based private state
const _balance = new WeakMap();
const _log = new WeakMap();
 
class OldAccount {
  constructor(balance) {
    _balance.set(this, balance);
    _log.set(this, []);
  }
  deposit(amount) {
    _balance.set(this, _balance.get(this) + amount);
    _log.get(this).push({ type: "deposit", amount });
  }
  get balance() { return _balance.get(this); }
}
 
// NEW: Private class fields
class NewAccount {
  #balance;
  #log = [];
 
  constructor(balance) { this.#balance = balance; }
  deposit(amount) {
    this.#balance += amount;
    this.#log.push({ type: "deposit", amount });
  }
  get balance() { return this.#balance; }
}