Menulis clean code JavaScript bukan sekadar membuat program berjalan dengan benar, tetapi juga memastikan kode mudah dipahami, diubah, dan dikembangkan oleh siapa pun yang bekerja di proyek tersebut. Kode yang “berfungsi” belum tentu baik — terutama jika sulit dibaca, penuh duplikasi, atau tidak mengikuti pola logika yang konsisten.
Sebagai seorang frontend developer, memahami dan menerapkan prinsip clean code sangat penting. Ini akan membantu kamu menjaga kualitas proyek jangka panjang, menghindari bug tersembunyi, dan mempermudah kolaborasi tim. Dua fondasi utama dalam praktik clean coding adalah prinsip SOLID dan konsep DRY (Don’t Repeat Yourself).
Dalam artikel ini, kita akan membahas bagaimana kedua prinsip tersebut bisa diterapkan secara nyata dalam JavaScript modern untuk meningkatkan kualitas kode frontend.
Apa Itu Clean Code JavaScript?
Clean code berarti menulis kode yang:
-
Mudah dibaca dan dipahami.
-
Tidak rumit dan tidak berlebihan.
-
Mudah diuji, di-debug, dan diperluas.
-
Konsisten dalam gaya penulisan dan penamaan.
Tujuan akhirnya adalah agar kode tidak hanya bisa dijalankan oleh komputer, tetapi juga bisa “dibaca” oleh manusia dengan mudah.
Prinsip SOLID dalam JavaScript
SOLID adalah lima prinsip desain kode yang membantu membuat program lebih fleksibel, mudah diuji, dan siap dikembangkan. Walaupun awalnya diperkenalkan untuk bahasa OOP seperti Java atau C#, prinsip ini juga sangat relevan di JavaScript — terutama dalam konteks class-based programming dan modular design.
1. S — Single Responsibility Principle (SRP)
“Setiap fungsi atau class harus memiliki satu alasan untuk berubah.”
Setiap fungsi atau class sebaiknya hanya memiliki satu tanggung jawab. Jika sebuah fungsi melakukan banyak hal sekaligus, debugging dan perawatan akan sulit.
✅ Contoh yang baik:
class UserService {
getUserData(id) {
// mengambil data user
}
}
class UserRenderer {
renderProfile(user) {
// menampilkan profil user di UI
}
}
❌ Contoh yang buruk:
class UserManager {
getUserData(id) {
// ambil data user
}
renderProfile(user) {
// tampilkan profil user
}
}
Fungsi pengambilan data dan tampilan UI seharusnya dipisah agar lebih fleksibel.
2. O — Open/Closed Principle (OCP)
“Kode harus terbuka untuk diperluas, tetapi tertutup untuk diubah.”
Artinya, kamu sebaiknya menambahkan fitur baru tanpa mengubah kode lama secara langsung.
✅ Contoh:
class Payment {
process() {
throw new Error("Method not implemented");
}
}
class CreditCardPayment extends Payment {
process() {
console.log("Pembayaran dengan kartu kredit diproses");
}
}
class PayPalPayment extends Payment {
process() {
console.log("Pembayaran dengan PayPal diproses");
}
}
Dengan pola seperti ini, menambahkan metode pembayaran baru tidak perlu mengubah logika di class utama.
3. L — Liskov Substitution Principle (LSP)
“Subclass harus bisa menggantikan superclass tanpa mengubah perilaku program.”
Jika sebuah class turunan menggantikan class induknya, perilakunya tetap harus sesuai.
✅ Contoh:
class Shape {
area() {}
}
class Square extends Shape {
constructor(side) {
super();
this.side = side;
}
area() {
return this.side * this.side;
}
}
Kode ini dapat menggunakan Shape atau Square tanpa mengubah hasil program.
I — Interface Segregation Principle (ISP)
“Lebih baik banyak interface kecil daripada satu interface besar.”
Jangan memaksa sebuah class untuk mengimplementasikan method yang tidak dibutuhkan.
Di JavaScript, ini bisa diterapkan dengan membagi tanggung jawab antar objek kecil.
✅ Contoh:
class Printer {
print() {}
}
class Scanner {
scan() {}
}
class MultiFunctionDevice {
constructor(printer, scanner) {
this.printer = printer;
this.scanner = scanner;
}
print() {
this.printer.print();
}
scan() {
this.scanner.scan();
}
}
Kode menjadi modular dan fleksibel.
5. D — Dependency Inversion Principle (DIP)
“Modul tingkat tinggi tidak boleh bergantung langsung pada modul tingkat rendah.”
Gunakan dependency injection agar komponen tidak saling terikat kuat (tightly coupled).
✅ Contoh:
class EmailService {
send(message) {
console.log(`Mengirim email: ${message}`);
}
}
class Notification {
constructor(service) {
this.service = service;
}
send(message) {
this.service.send(message);
}
}
const email = new EmailService();
const notif = new Notification(email);
notif.send("Halo dunia!");
Sekarang, Notification bisa menggunakan layanan lain (misal SMS) tanpa perlu diubah.
Prinsip DRY (Don’t Repeat Yourself)
Prinsip DRY mendorong developer untuk tidak menulis logika yang sama berulang kali.
Duplikasi kode meningkatkan risiko bug dan membuat perubahan di satu tempat memerlukan update di banyak tempat lain.
✅ Contoh yang baik:
function formatCurrency(amount) {
return `Rp${amount.toLocaleString('id-ID')}`;
}
console.log(formatCurrency(10000));
console.log(formatCurrency(25000));
❌ Contoh yang buruk:
console.log(`Rp${10000.toLocaleString('id-ID')}`);
console.log(`Rp${25000.toLocaleString('id-ID')}`);
Dengan menerapkan DRY, perubahan hanya perlu dilakukan di satu fungsi saja.
Manfaat Clean Code JavaScript
Menerapkan prinsip SOLID dan DRY membawa banyak keuntungan:
✅ Kode lebih mudah dibaca dan dipahami.
✅ Perubahan dan penambahan fitur lebih cepat.
✅ Risiko bug lebih rendah.
✅ Kolaborasi tim lebih efisien.
✅ Pengujian (testing) lebih mudah dilakukan.
Kesimpulan
Menerapkan clean code JavaScript dengan prinsip SOLID dan DRY membantu developer menulis kode yang tidak hanya berfungsi, tetapi juga kuat, efisien, dan mudah dikembangkan.
Sebagai frontend developer, prinsip ini sangat penting saat proyek mulai tumbuh dan melibatkan banyak komponen. Mulailah dengan memecah tanggung jawab fungsi, hindari duplikasi kode, serta gunakan dependency injection untuk menjaga fleksibilitas.
Ingat: Kode yang baik bukan yang paling rumit, tetapi yang paling mudah dipahami. Dengan kebiasaan ini, kamu akan menjadi developer yang produktif dan profesional di dunia JavaScript modern.