Mengapa Clean Code — Clean Code

Coba bayangin kamu baru join tim baru. Hari pertama dikasih akses repo — buka file utama. Variabel namanya d, arr, tmp, flag2. Fungsi panggil 5-7 fungsi lain…

Clean code adalah kode yang gampang dibaca dan aman diubah oleh orang lain, termasuk kamu sendiri enam bulan lagi. Bayangin titipan belanja dari ibu: "gl 2, tlr 10, mny 1". Yang nulis paham. Kamu di depan rak harus nebak: gula 2 kilo? telur 10 butir? minyak 1 liter? Kode juga begitu. Komputer gak peduli variabelnya bernama k atau cart, tapi manusia yang membacanya harus menebak tiap singkatan.

🧪 Tebakan cepat: fungsi kasir yang berantakan dan versi bersihnya dijalankan dengan keranjang yang sama. Hasilnya sama, atau versi bersih lebih tepat? Tebak dulu, jawabannya ada di bagian "Komputer gak peduli, manusia peduli".

Contoh sepanjang track: kasir Toko Kaos Raka

Raka jualan kaos online. Aturan tokonya cuma dua:

Ini fungsi kasir yang ditulis buru-buru. Kodenya jalan dan hasilnya benar:

function hitung(k, v) {
  let t = 0;
  for (let i = 0; i < k.length; i++) {
    t = t + k[i].price * k[i].qty;
  }
  if (v === 'HEMAT10') t = t - t * 0.1;
  if (t < 200000) t = t + 15000;
  return 'Total: Rp ' + t.toLocaleString('id-ID');
}

const cart = [
  { name: 'Kaos Polos Hitam', price: 75000, qty: 2 },
  { name: 'Kaos Sablon Kopi', price: 95000, qty: 1 },
];
console.log(hitung(cart, 'HEMAT10')); // Total: Rp 220.500

Sekarang jadi orang yang baru pertama membacanya. Sebelum berani mengubah satu baris, kamu harus menjawab enam pertanyaan:

  1. k itu apa? Keranjang belanja, isinya barang dengan price dan qty.
  2. v itu apa? Kode voucher.
  3. t itu apa? Total yang terus diperbarui.
  4. 0.1 itu apa? Potongan voucher 10%.
  5. 200000 itu batas apa? Batas gratis ongkir.
  6. 15000 itu apa? Ongkirnya.

Jawabannya cuma ada di kepala penulisnya. Angka tanpa penjelasan seperti 0.1 dan 200000 disebut magic number (angka ajaib).

Versi bersihnya

const VOUCHER_DISCOUNT = 0.1;     // HEMAT10: potongan 10%
const FREE_SHIPPING_MIN = 200000; // gratis ongkir mulai Rp 200.000
const SHIPPING_FEE = 15000;

function calculateTotal(cart, voucherCode) {
  let total = 0;
  for (const item of cart) {
    total += item.price * item.qty;
  }
  if (voucherCode === 'HEMAT10') total -= total * VOUCHER_DISCOUNT;
  if (total < FREE_SHIPPING_MIN) total += SHIPPING_FEE;
  return 'Total: Rp ' + total.toLocaleString('id-ID');
}

Logikanya gak berubah sama sekali: urutan langkahnya sama, angkanya sama.

Komputer gak peduli, manusia peduli

Jalankan dua-duanya dengan keranjang yang sama:

> hitung(cart, 'HEMAT10')
Total: Rp 220.500
> calculateTotal(cart, 'HEMAT10')
Total: Rp 220.500

Sama persis. Itu jawaban tebakannya: merapikan kode gak bikin hasilnya lebih tepat. Yang berubah cuma seberapa cepat manusia paham dan seberapa aman kodenya diubah. Hitungannya: 2 × 75.000 + 95.000 = 245.000, dipotong 10% jadi 220.500, dan itu di atas 200.000 jadi gratis ongkir.

Mengubah bentuk kode tanpa mengubah hasilnya disebut refactor. Seluruh track ini adalah refactor kecil-kecilan atas fungsi kasir ini.

Kode lebih sering dibaca daripada ditulis

Fungsi kasir ditulis sekali, tapi dibaca tiap kali ada yang mau menambah voucher, mengubah ongkir, atau mencari bug. Robert C. Martin di buku Clean Code (2008) memperkirakan perbandingan waktu membaca dan menulis kode "well over 10 to 1", jauh di atas 10 banding 1. Itu perkiraan dari pengalamannya, bukan hasil pengukuran, tapi arahnya cocok dengan pengalaman banyak tim. Jadi biaya merawat kode (maintenance) sebagian besar adalah biaya membaca, dan kode yang gampang dibaca menurunkan biaya itu.

Technical debt: utang yang berbunga

Technical debt (utang teknis) adalah istilah dari Ward Cunningham (1992). Memilih jalan pintas daripada solusi yang benar itu seperti berutang: kamu dapat waktu sekarang, lalu bayar "bunga" tiap kali kodenya harus diubah, berupa waktu membaca yang lebih lama dan kesalahan yang lebih gampang terjadi.

Contoh: Raka minta "gratis ongkir mulai Rp 250.000". Di versi bersih kamu ubah satu konstanta, FREE_SHIPPING_MIN = 250000. Di versi berantakan kamu harus memastikan dulu bahwa 200000 itu batas ongkir. Makin banyak fitur ditempel ke hitung, makin besar bunganya.

Refactor yang mengubah hasil itu bug

Merapikan boleh, mengubah hasil gak. Cara paling murah untuk memastikannya: test kecil yang membandingkan hasil dengan yang seharusnya. Misalnya ada yang "merapikan" dengan memindah cek ongkir ke atas cek voucher:

function check(actual, expected) {
  console.log(actual === expected ? 'OK   ' + actual : 'BEDA ' + actual + ', harusnya ' + expected);
}

const cartD = [
  { name: 'Kaos Polos Hitam', price: 75000, qty: 1 },
  { name: 'Kaos Sablon Kopi', price: 95000, qty: 1 },
  { name: 'Topi Raka', price: 40000, qty: 1 },
];
check(calculateTotal(cart, 'HEMAT10'), 'Total: Rp 220.500');
check(calculateTotal(cartD, 'HEMAT10'), 'Total: Rp 204.000');

OK   Total: Rp 220.500
BEDA Total: Rp 189.000, harusnya Total: Rp 204.000

Keranjang D belanjanya Rp 210.000. Urutan yang benar: dipotong dulu jadi 189.000, itu di bawah 200.000, jadi kena ongkir: 204.000. Kalau ongkir dicek duluan, 210.000 dianggap gratis ongkir. Keranjang pertama lolos dua-duanya, jadi tanpa keranjang D bug ini gak ketahuan.

📌 Peta track ini

Fungsi kasir ini akan dirapikan terus: nama yang jelas (Penamaan yang Baik), dipecah jadi fungsi kecil (Fungsi Kecil & Fokus), pemformat rupiah yang cukup ditulis sekali (DRY), versi pintar vs versi biasa (KISS), lalu tanggung jawab, error handling, komentar, dan teknik refactoring. Test kecil check ikut di tiap langkah.

⚠️ Jebakan yang sering ketemu

TL;DR: Clean code adalah kode yang gampang dibaca dan aman diubah manusia. Komputer gak peduli: hitung(k, v) dan calculateTotal(cart, voucherCode) sama-sama mencetak Total: Rp 220.500. Kode jauh lebih sering dibaca daripada ditulis, jadi nama yang jelas dan magic number yang diberi nama menurunkan biaya maintenance. Jalan pintas yang bikin kode susah dibaca adalah technical debt: bunganya dibayar tiap kali kode diubah. Refactor mengubah bentuk, bukan hasil. Test kecil yang membandingkan hasil sebelum dan sesudah, dengan keranjang yang tepat di batas aturan, menangkap refactor yang kebablasan.

Yang akan kamu pelajari