Module Pattern — Design Patterns

Module Pattern adalah cara mengorganisasi kode menjadi unit-unit mandiri dengan public dan private interface. Di JavaScript modern, ini sudah built-in lewat…

Module Pattern adalah cara mengorganisasi kode menjadi unit-unit mandiri dengan public dan private interface. Di JavaScript modern, ini sudah built-in lewat ES Modules (import/export), tapi memahami polanya tetap penting.

Masalah yang diselesaikan:

Versi klasik — IIFE (Immediately Invoked Function Expression):

const Counter = (function() {
  // Private — tidak bisa diakses dari luar
  let count = 0;

  // Public — interface yang di-expose
  return {
    increment() { count++; },
    decrement() { count--; },
    getCount() { return count; }
  };
})();

Counter.increment();
Counter.increment();
console.log(Counter.getCount()); // 2
console.log(Counter.count);      // undefined — private!

Versi modern — ES Modules:

// counter.js
let count = 0; // Private ke module ini

export function increment() { count++; }
export function decrement() { count--; }
export function getCount() { return count; }
// Variable `count` tidak di-export, jadi private

// app.js
import { increment, getCount } from "./counter.js";
increment();
console.log(getCount()); // 1

Revealing Module Pattern:

const Calculator = (function() {
  let result = 0;

  function add(x) { result += x; }
  function subtract(x) { result -= x; }
  function getResult() { return result; }
  function reset() { result = 0; }

  // "Reveal" hanya yang perlu diakses publik
  return { add, subtract, getResult, reset };
})();

Penggunaan di dunia nyata:

// React custom hook = Module Pattern!
function useAuth() {
  // Private state & logic
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => { /* fetch user */ }, []);

  // Public interface
  return { user, loading, login, logout };
}

Kapan pakai Module Pattern: