Design Pattern dalam OOP JavaScript: Factory, Singleton, dan Observer

Dalam dunia pemrograman berorientasi objek, Design Pattern adalah solusi umum untuk permasalahan yang sering muncul dalam pengembangan perangkat lunak. Di JavaScript modern, penggunaan Design Pattern dalam OOP JavaScript sangat penting untuk menciptakan kode yang terorganisir, mudah diperluas, dan dapat digunakan kembali. Pola-pola ini bukan sekadar teori — melainkan praktik nyata yang membantu developer menghindari duplikasi kode dan menjaga konsistensi arsitektur aplikasi.

Dengan berkembangnya JavaScript sebagai bahasa serbaguna untuk front-end maupun back-end, pemahaman tentang Design Pattern menjadi semakin krusial. Tiga pola yang paling sering digunakan adalah Factory Pattern, Singleton Pattern, dan Observer Pattern. Masing-masing memiliki tujuan berbeda, namun semuanya berkontribusi untuk meningkatkan efisiensi, modularitas, dan fleksibilitas dalam membangun aplikasi skala besar.

Apa itu Factory Pattern?

Factory Pattern adalah pola desain yang digunakan untuk membuat objek tanpa harus menentukan class atau tipe objek secara eksplisit di dalam kode utama. Tujuan utamanya adalah menyederhanakan pembuatan objek dengan mengabstraksikan proses inisialisasi di dalam sebuah “factory” atau pabrik pembuat objek.

Contoh Implementasi Factory Pattern

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
}

class UserFactory {
  createUser(name, role) {
    switch (role) {
      case 'admin':
        return new User(name, 'Administrator');
      case 'editor':
        return new User(name, 'Editor');
      default:
        return new User(name, 'Guest');
    }
  }
}

// Penggunaan
const factory = new UserFactory();
const admin = factory.createUser('Andi', 'admin');
const guest = factory.createUser('Budi', 'guest');

console.log(admin);
console.log(guest);

Kelebihan Factory Pattern

Memisahkan logika pembuatan objek dari penggunaan objek.
Mudah diperluas ketika jenis objek bertambah.
Membuat kode lebih bersih dan terstruktur.

Apa itu Singleton Pattern?

Singleton Pattern digunakan untuk memastikan bahwa hanya ada satu instance dari sebuah class di seluruh aplikasi. Pola ini sangat berguna ketika kamu membutuhkan satu titik akses global untuk data atau konfigurasi tertentu, seperti pengaturan aplikasi atau koneksi database.

Contoh Implementasi Singleton Pattern

class Config {
  constructor() {
    if (Config.instance) {
      return Config.instance;
    }
    this.settings = {};
    Config.instance = this;
  }

  set(key, value) {
    this.settings[key] = value;
  }

  get(key) {
    return this.settings[key];
  }
}

// Penggunaan
const config1 = new Config();
config1.set('theme', 'dark');

const config2 = new Config();
console.log(config2.get('theme')); // Output: dark
console.log(config1 === config2);  // Output: true

Kelebihan Singleton Pattern

Mencegah pembuatan banyak instance class yang sama.
Ideal untuk penyimpanan konfigurasi global.
Menghemat memori dan memudahkan sinkronisasi data.

Catatan

Gunakan Singleton Pattern dengan bijak, karena penggunaan berlebihan dapat menimbulkan ketergantungan global (global dependency) yang sulit diuji dan dikelola.

Apa itu Observer Pattern?

Observer Pattern adalah pola desain yang memungkinkan satu objek (subject) untuk memberi tahu banyak objek lain (observer) ketika terjadi perubahan data. Pola ini sering digunakan dalam sistem event-driven seperti DOM Event Listener, aplikasi real-time, atau sistem notifikasi.

Contoh Implementasi Observer Pattern

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(sub => sub !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} menerima update: ${data}`);
  }
}

// Penggunaan
const subject = new Subject();

const obs1 = new Observer('Observer 1');
const obs2 = new Observer('Observer 2');

subject.subscribe(obs1);
subject.subscribe(obs2);

subject.notify('Data baru tersedia!');

Kelebihan Observer Pattern

Cocok untuk sistem event-driven dan aplikasi reaktif.
Memisahkan logika antara pengirim (subject) dan penerima (observer).
Mempermudah pengelolaan notifikasi dan komunikasi antar objek.

Studi Kasus: Menggabungkan Design Pattern

Mari kita lihat bagaimana ketiga pattern ini bisa bekerja bersama dalam satu sistem kecil. Misalnya, dalam aplikasi manajemen pengguna dengan Factory untuk membuat user, Singleton untuk konfigurasi global, dan Observer untuk notifikasi perubahan.

// Singleton untuk konfigurasi
class AppConfig {
  constructor() {
    if (AppConfig.instance) return AppConfig.instance;
    this.settings = { mode: 'production' };
    AppConfig.instance = this;
  }

  getMode() {
    return this.settings.mode;
  }
}

// Factory untuk membuat user
class UserFactory {
  createUser(name, role) {
    return { name, role };
  }
}

// Observer untuk notifikasi
class UserNotifier {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  notify(user) {
    this.observers.forEach(obs => obs.update(user));
  }
}

// Observer objek
class Admin {
  update(user) {
    console.log(`Admin diberitahu: Pengguna baru ${user.name} dengan role ${user.role}`);
  }
}

// Simulasi penggunaan
const config = new AppConfig();
const factory = new UserFactory();
const notifier = new UserNotifier();

const admin = new Admin();
notifier.subscribe(admin);

const newUser = factory.createUser('Dewi', 'Editor');
notifier.notify(newUser);

console.log('Mode aplikasi:', config.getMode());

Penjelasan:

AppConfig memastikan konfigurasi hanya satu instance (Singleton).
UserFactory bertanggung jawab membuat user baru (Factory).
UserNotifier mengirimkan notifikasi ke admin setiap kali user baru dibuat (Observer).

Keuntungan Menggunakan Design Pattern dalam OOP JavaScript

Kode Lebih Terstruktur: Mencegah kekacauan logika dengan memisahkan tanggung jawab.
Mudah Diperluas: Menambah fitur baru tanpa mengubah struktur utama.
Pemeliharaan Mudah: Developer lain dapat memahami arsitektur lebih cepat.
Efisiensi dan Skalabilitas: Cocok untuk proyek besar yang berkembang terus-menerus.

Kesimpulan

Menguasai Design Pattern dalam OOP JavaScript adalah langkah penting untuk menjadi developer profesional. Pola seperti Factory, Singleton, dan Observer membantu menulis kode yang modular, efisien, dan mudah dirawat. Ketika digunakan dengan bijak, ketiga pattern ini menjadi fondasi arsitektur aplikasi yang tangguh dan siap berkembang seiring kebutuhan proyek modern.

Jika kamu sudah memahami dasar-dasar OOP di JavaScript, mulailah menerapkan pattern ini dalam proyek kecilmu. Dengan begitu, kamu akan memahami bagaimana teori dapat diubah menjadi solusi nyata dalam pengembangan web modern.