05-design-patterns.js

/**
 * 05 — COMMON DESIGN PATTERNS IN VANILLA JS
 * -------------------------------------------
 */

// ── 1. Module pattern — encapsulate private state with a closure ────────
// Anything not returned stays private; only the returned object is public.
const Counter = (function () {
  let count = 0; // private — inaccessible from outside

  return {
    increment() {
      return ++count;
    },
    reset() {
      count = 0;
    },
  };
})();

console.log(Counter.increment()); // 1
console.log(Counter.increment()); // 2
console.log(Counter.count);       // undefined — truly private

// ── 2. Singleton — ensure only one instance ever exists ─────────────────
class Database {
  static #instance; // private static field

  constructor() {
    if (Database.#instance) {
      return Database.#instance; // return the existing instance instead of a new one
    }
    this.connection = `connected-${Date.now()}`;
    Database.#instance = this;
  }
}

const db1 = new Database();
const db2 = new Database();
console.log(db1 === db2); // true — same instance every time

// ── 3. Factory — create objects without exposing `new`/constructor logic ─
function createUser(type, name) {
  const base = { name, createdAt: Date.now() };

  switch (type) {
    case "admin":
      return { ...base, role: "admin", permissions: ["read", "write", "delete"] };
    case "guest":
      return { ...base, role: "guest", permissions: ["read"] };
    default:
      return { ...base, role: "user", permissions: ["read", "write"] };
  }
}

console.log(createUser("admin", "Abdul"));
console.log(createUser("guest", "Visitor"));

// ── 4. Observer — subscribe to and react to events ───────────────────────
class EventEmitter {
  #listeners = {};

  on(event, callback) {
    (this.#listeners[event] ??= []).push(callback);
    return this; // allow chaining
  }

  emit(event, ...args) {
    (this.#listeners[event] ?? []).forEach((cb) => cb(...args));
  }
}

const emitter = new EventEmitter();
emitter.on("login", (user) => console.log(`${user} logged in`));
emitter.on("login", (user) => console.log(`Sending welcome email to ${user}`));
emitter.emit("login", "Abdul");
// Both listeners fire independently — this decouples the "login" event
// from whatever code reacts to it.