Advanced Design Patterns di JavaScript: Module, Proxy, dan Strategy Pattern

Dalam dunia pengembangan aplikasi modern, struktur kode yang rapi dan mudah dikelola menjadi hal yang sangat penting. Di sinilah peran Advanced Design Patterns di JavaScript membantu developer mengatur kode agar tetap efisien, reusable, dan scalable. Design pattern bukan hanya teori akademis, melainkan panduan praktis yang terbukti efektif di berbagai proyek nyata — mulai dari aplikasi web kecil hingga sistem enterprise berskala besar.

JavaScript sebagai bahasa pemrograman yang fleksibel mendukung berbagai pendekatan desain, termasuk pola Module, Proxy, dan Strategy Pattern. Ketiga pattern ini termasuk kategori “advanced” karena digunakan untuk memecahkan masalah kompleks seperti modularisasi kode, kontrol akses, dan pemilihan strategi eksekusi dinamis. Memahami penerapan ketiganya akan membantumu menulis kode yang tidak hanya berfungsi, tetapi juga elegan dan siap berkembang di masa depan.

Apa itu Module Pattern?

Module Pattern digunakan untuk mengelompokkan logika program ke dalam satu unit yang terpisah agar tidak bercampur dengan bagian kode lain. Tujuannya adalah menciptakan enkapsulasi (encapsulation), menjaga variabel dan fungsi tetap bersifat private, sekaligus menyediakan antarmuka (API) publik untuk diakses dari luar.

Contoh Implementasi Module Pattern

const CalculatorModule = (function () {
  // Private variable
  let result = 0;

  // Private method
  function log(value) {
    console.log("Hasil sekarang:", value);
  }

  // Public API
  return {
    add(number) {
      result += number;
      log(result);
    },
    subtract(number) {
      result -= number;
      log(result);
    },
    reset() {
      result = 0;
      log(result);
    },
    getResult() {
      return result;
    },
  };
})();

// Penggunaan
CalculatorModule.add(5);
CalculatorModule.subtract(2);
console.log("Total akhir:", CalculatorModule.getResult());

Kelebihan Module Pattern

Menjaga privasi data dan mencegah konflik variabel global.
Memudahkan organisasi kode menjadi lebih modular.
Cocok untuk membangun library atau komponen kecil dalam aplikasi besar.

Apa itu Proxy Pattern?

Proxy Pattern adalah pola desain yang berfungsi sebagai perantara antara objek asli dan pengguna objek tersebut. Proxy dapat digunakan untuk mengontrol akses, melakukan validasi, menambah logika tambahan, atau bahkan menunda eksekusi tanpa mengubah objek aslinya.

Pola ini sangat berguna dalam JavaScript modern, terutama dengan fitur ES6 Proxy API, yang memungkinkan developer membuat “lapisan pengawas” pada objek.

Contoh Implementasi Proxy Pattern

const user = {
  name: "Andi",
  age: 20,
};

const userProxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Akses properti: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    if (prop === "age" && value < 0) {
      throw new Error("Umur tidak boleh negatif!");
    }
    target[prop] = value;
    console.log(`Properti ${prop} diubah menjadi ${value}`);
    return true;
  },
});

// Penggunaan
console.log(userProxy.name); // Akses properti: name
userProxy.age = 25;          // Properti age diubah menjadi 25
// userProxy.age = -5;       // Error: Umur tidak boleh negatif!

Kelebihan Proxy Pattern

Dapat memantau dan memodifikasi perilaku objek tanpa mengubahnya langsung.
Cocok untuk validasi data, logging, atau lazy loading.
Mempermudah debugging dan penerapan keamanan aplikasi.

Apa itu Strategy Pattern?

Strategy Pattern digunakan untuk mendefinisikan sekumpulan algoritma yang bisa saling dipertukarkan. Dengan kata lain, pola ini memungkinkan program memilih strategi eksekusi yang berbeda secara dinamis, tanpa perlu mengubah struktur utama kode.

Pola ini sering digunakan dalam kasus seperti pemilihan metode pembayaran, perhitungan ongkir, atau pengaturan tampilan yang bervariasi.

Contoh Implementasi Strategy Pattern

class PaymentStrategy {
  pay(amount) {
    throw new Error("Metode pay() harus diimplementasikan");
  }
}

class CreditCardPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Membayar Rp${amount} menggunakan Kartu Kredit`);
  }
}

class EWalletPayment extends PaymentStrategy {
  pay(amount) {
    console.log(`Membayar Rp${amount} menggunakan E-Wallet`);
  }
}

class PaymentContext {
  setStrategy(strategy) {
    this.strategy = strategy;
  }

  execute(amount) {
    this.strategy.pay(amount);
  }
}

// Penggunaan
const payment = new PaymentContext();

payment.setStrategy(new CreditCardPayment());
payment.execute(100000);

payment.setStrategy(new EWalletPayment());
payment.execute(50000);

Kelebihan Strategy Pattern

Memudahkan pergantian algoritma atau metode eksekusi.
Menghindari rantai if...else atau switch yang panjang.
Membuat kode lebih fleksibel dan terbuka untuk pengembangan fitur baru.

Studi Kasus: Menggabungkan Ketiga Pattern

Bayangkan kamu membuat aplikasi e-commerce modern.

Module Pattern digunakan untuk mengelola fungsi checkout.
Proxy Pattern dipakai untuk memvalidasi data pengguna sebelum transaksi.
Strategy Pattern menangani berbagai metode pembayaran.

// Module Pattern - Keranjang Belanja
const CartModule = (function () {
  const items = [];

  return {
    addItem(product) {
      items.push(product);
      console.log(`${product} ditambahkan ke keranjang.`);
    },
    getItems() {
      return items;
    },
  };
})();

// Proxy Pattern - Validasi Data User
const userData = { name: "Dewi", balance: 200000 };
const userProxy = new Proxy(userData, {
  set(target, prop, value) {
    if (prop === "balance" && value < 0) {
      throw new Error("Saldo tidak boleh negatif!");
    }
    target[prop] = value;
    return true;
  },
});

// Strategy Pattern - Pembayaran
class PaymentMethod {
  pay(amount) {
    throw new Error("Implementasi dibutuhkan!");
  }
}

class CashPayment extends PaymentMethod {
  pay(amount) {
    console.log(`Pembayaran tunai sebesar Rp${amount} berhasil.`);
  }
}

class WalletPayment extends PaymentMethod {
  pay(amount) {
    console.log(`Pembayaran e-wallet sebesar Rp${amount} berhasil.`);
  }
}

class Checkout {
  constructor(strategy) {
    this.strategy = strategy;
  }

  processPayment(amount) {
    this.strategy.pay(amount);
  }
}

// Simulasi
CartModule.addItem("Laptop");
CartModule.addItem("Mouse");

userProxy.balance -= 100000;
console.log("Saldo tersisa:", userProxy.balance);

const checkout = new Checkout(new WalletPayment());
checkout.processPayment(100000);

Penjelasan:

CartModule menjaga data keranjang tetap private.
Proxy mengontrol perubahan saldo user.
Strategy mengatur metode pembayaran yang bisa diubah kapan saja.

Keuntungan Advanced Design Patterns di JavaScript

Struktur Kode Lebih Modular: Tiap bagian kode punya tanggung jawab jelas.
Meningkatkan Keamanan & Kontrol: Dengan Proxy, kamu bisa mengatur akses objek secara aman.
Mudah Diperluas: Tambah fitur tanpa mengubah struktur utama.
Pemeliharaan Efisien: Memudahkan tim besar dalam mengelola proyek kompleks.
Kinerja Optimal: Menghindari duplikasi logika dan mempercepat pengembangan.

Kesimpulan

Memahami dan menerapkan Advanced Design Patterns di JavaScript seperti Module, Proxy, dan Strategy Pattern adalah langkah penting menuju pengembangan aplikasi profesional. Ketiganya saling melengkapi — Module untuk modularisasi kode, Proxy untuk kontrol akses dan validasi, serta Strategy untuk fleksibilitas logika eksekusi.

Dengan menguasai ketiga pola ini, kamu akan dapat menulis kode yang lebih bersih, efisien, dan siap berkembang. Pola-pola ini bukan hanya teori, melainkan praktik nyata yang digunakan di banyak framework besar seperti React, Vue, dan Node.js. Jadi, jika kamu ingin naik level dalam dunia JavaScript modern, mulailah menerapkan pola desain ini dalam proyekmu hari ini.