Penamaan yang Baik — Clean Code

Penamaan adalah skill paling penting dalam clean code. Nama yang baik membuat kode self-documenting — tidak perlu komentar untuk menjelaskan. Prinsip 1: Nama…

Nama variabel dan fungsi adalah penjelasan yang selalu ikut ke mana pun kodenya pergi. Nama yang baik menjawab pertanyaan pembaca sebelum dia sempat bertanya. Bayangin toples di dapur: yang berlabel "gula pasir" langsung kamu ambil, yang berlabel "isi" atau "toples 2" harus kamu buka dan cicipi dulu. Variabel k, data atau temp itu toples tanpa label.

🧪 Tebakan cepat: untuk keranjang belanja, apakah nama data lebih jelas daripada k, atau sama saja? Tebak dulu, jawabannya ada di bagian "Nama umum sama gelapnya dengan singkatan".

Ukur nama dari yang harus diingat pembaca

Ini fungsi kasir Toko Kaos Raka dari lesson sebelumnya. Hasilnya benar, Total: Rp 220.500 untuk 2 kaos polos dan 1 kaos sablon dengan voucher HEMAT10:

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');
}

Cara mengukur nama: hitung berapa hal yang harus diingat pembaca sambil membaca. Tiap nama yang gak menjelaskan dirinya menambah satu.

Nama sekarang	Yang harus diingat pembaca	Nama yang menjelaskan dirinya
`hitung`	menghitung total belanja, hasilnya teks	`calculateTotal`
`k`	keranjang, isinya barang dengan `price` dan `qty`	`cart`
`v`	kode voucher	`voucherCode`
`t`	total yang terus diperbarui	`total`
`0.1`	potongan voucher `HEMAT10`	`VOUCHER_DISCOUNT`
`200000`	batas gratis ongkir	`FREE_SHIPPING_MIN`
`15000`	ongkir	`SHIPPING_FEE`

Tujuh hal untuk fungsi 9 baris. Setelah diganti, nol: tiap nama menjawab pertanyaannya sendiri. i boleh tetap i, karena loop-nya cuma 3 baris dan semua orang tahu i itu index.

Nama umum sama gelapnya dengan singkatan

Godaannya adalah mengganti k dengan data, v dengan str, dan t dengan temp:

function processData(data, str) {
  let temp = 0;
  // ... sama persis
}

Kelihatan lebih rapi, tapi pembaca tetap harus mengingat tujuh hal yang sama. data itu data apa? str itu teks apa? temp menyimpan apa? Nama umum seperti data, info, str, temp, result dan processData cuma menyebut tipe atau "sesuatu", bukan perannya. Jadi untuk keranjang, data sama saja dengan k. Itu jawaban tebakannya. Yang menolong adalah nama yang menyebut peran: cart, voucherCode, total.

Aturan praktis

Fungsi pakai kata kerja, variabel pakai kata benda. calculateTotal, formatRupiah, fetchOrders untuk fungsi. total, cart, orders untuk variabel.
Boolean berbentuk pertanyaan ya/tidak: isMember, hasVoucher, canCheckout. if (isMember) dibaca seperti kalimat.
Panjang nama sesuai jangkauannya. i di loop 3 baris itu cukup. Variabel yang dipakai di seluruh file butuh nama lengkap: const m = 5 di atas file bikin bingung, const maxLoginAttempts = 5 gak.
Jangan menaruh tipe di nama. arrUsers, strName, userListArray: cukup users dan name. Editor sudah menunjukkan tipenya.
Sebut apa yang didapat, bukan cara mendapatkannya. getUsersByActiveStatus() bilang yang kembali adalah user dan saringannya status aktif. getData() terlalu umum, getUsers() gak bilang user yang mana, fetchAllActiveUsersFromDatabase() terlalu panjang dan membocorkan detail database: kalau datanya pindah ke API, namanya jadi bohong.
Buang kata pengisi. Data, Info, Value, Number, temporary jarang menambah arti. Untuk sisa hari sampai deadline, remainingDaysUntilDeadline lebih jelas daripada temporaryDeadlineCalcValue atau deadlineNumberForThisScreen.
Satu bahasa, satu pola per codebase. Banyak tim memakai English. Ada juga tim yang memakai Indonesia dengan istilah developer tetap English, seperti cara kita ngomong: daftarUser, filterUserAktif. Dua-duanya oke asal konsisten. Yang bikin bingung adalah campuran tanpa pola, seperti sisaHariSampaiDeadlineData.

Rename: nama berubah, hasil tetap

Mengganti nama adalah refactor paling aman, asal semua pemakaiannya ikut diganti. Kalau cuma baris pertama yang diganti:

function calculateTotal(cart, voucherCode) {
  let t = 0;
  for (let i = 0; i < k.length; i++) { // k masih nama lama

Uncaught ReferenceError: k is not defined

Parameternya sekarang bernama cart, jadi k gak ada lagi. Pakai fitur Rename Symbol di editor (F2 di VS Code): semua pemakaian ikut berganti sekaligus. Setelah rename, jalankan lagi dan pastikan outputnya masih Total: Rp 220.500.

Latihan: daftar user aktif

Latihannya memakai kode lain dengan masalah yang sama. Ada d, arr, fn, x dan r. Ganti namanya, logikanya jangan diubah:

Nama lama	Isinya	Contoh nama baru
`d`	tanggal hari ini	`tanggalHariIni`
`arr`	daftar user	`daftarUser`
`fn`	fungsi yang menyaring user aktif	`filterUserAktif` (wajib nama ini)
`x`	satu user	`user`
`r`	hasil saringan	`hasil`, `userAktif`

Yang dinilai: const d dan function fn gak ada lagi, fungsi filterUserAktif ada dan benar-benar menyaring user yang isActive-nya true, dan dua baris output tetap 3 lalu Budi, Citra, Dedi.

⚠️ Jebakan yang sering ketemu

Rename setengah jalan. Deklarasinya sudah diganti, pemakaiannya belum: ReferenceError: k is not defined. Pakai Rename Symbol, jangan cari-ganti manual.
Mengganti nama sekalian mengubah logika. Kalau output berubah, kamu gak tahu perubahan mana yang salah. Rename dulu, jalankan, baru ubah logikanya.
Nama umum. data, info, temp, result terdengar rapi tapi gak menjawab apa-apa.
Nama yang bohong. getUsers() yang diam-diam juga menghapus user, atau isValid yang isinya angka. Nama yang salah lebih buruk daripada nama pendek.

TL;DR: Ukur nama dari berapa hal yang harus diingat pembaca: hitung(k, v) dengan t, 0.1, 200000 dan 15000 minta tujuh, calculateTotal(cart, voucherCode) dengan konstanta bernama minta nol. Nama umum (data, str, temp) sama gelapnya dengan singkatan, karena cuma menyebut tipe. Fungsi kata kerja, variabel kata benda, boolean is/has/can, panjang sesuai jangkauan, gak ada tipe di nama, sebut apa yang didapat (getUsersByActiveStatus(), remainingDaysUntilDeadline), satu bahasa yang konsisten. Rename semua pemakaiannya sekaligus, lalu pastikan outputnya sama.