Why do i care? 🤔

Mengawali pembahasan Clean Code, Agar kode lebih manusiawi pada kali ini, mungkin teman-teman berfikir:

"Apasih pentingnya? why do i care? halah yang penting aplikasi jalan, gapeduli nama variabelnya n,z,c,i 🥱"

Oke, untuk menjawab hal tersebut sekarang pernahkah teman-teman ngoding? kemudian kodingan tersebut sudah lama tidak dibuka, serta tidak di maintain dengan baik, apa yang terjadi? jika pada suatu waktu teman-teman kembali membukanya dan kemudian bilang:

"WTF, what it is? ini ada kondisi jika 2000 ini apa ya? ini ada variable y isinya apa ya? dan seterusnya 🤯".

Maka fix, berarti kodingan teman-teman tidak clean dan tidak manusiawi, yang buat aja bingung apalagi developer lain kan?

Pada akhirnya kalian sibuk untuk debugging ulang untuk mengetahui apa yang sebenarnya telah terjadi, apa sebenarnya isi dari variable y dan seterusnya 😖.

Nah, itulah pentingnya sebuah kode yang bersih atau istilah kerennya "Clean Code". Itu baru kodingan teman-teman sendiri. Let's imagine kalo itu kodingan orang lain misalnya, pasti teman-teman perlu waktu yang cukup lama untuk memahaminya dan itu wasting time sekali.

Maka dari itu kita sebagain developer mempunyai tanggung jawab terhadap apa yang kita tulis sehingga developer lain yang mungkin akan meneruskan projek kita tidak mengalami kesulitaan saat mempelajari kodingan kita, marilah kita menuliskan kode yang manusiawi secara general dan dapat dipahami oleh semua developer 😄. Setuju? Sepakat? oke, lanjut caw.

Kodenya ditulis pake JS ya teman-teman, untuk bahasa lain bisa mengikuti.

Point clean code 🪝

• Hindari nomor-nomor ajaib
• Variabel yang deskriptif
• Hindari konteks yang tidak perlu
• Pake default value di argumen daripada di variabel pendek
• Batasi jumlah argumen max 3
• Fungsi melakukan 1 tugas saja
• Hindari pemakaian boolean flags di parameter

Hindari nomor-nomor ajaib 🪄

Apakah kalian pernah ngoding atau pernah melihat kode yang seperti ini:

/** Code-1 */
if (days < 22) {
  // Return error or something
}

Ada yang bisa menjelaskan arti Code-1 diatas? apa itu 22? 😳

Yang paling tau kode diatas adalah pasti yang membuatnya. Tapi saya berani jamin, jika projeknya sudah lama tidak dibuka dan di maintain dengan baik, saya yakin 100% yang membuat sekalipun akan lupa xixi, atau paling tidak nge-lag sedikit lah saat mencoba memahami kodingannya kembali.

Tapi bagaimana jika kodingannya diubah menjadi seperti ini:

/** Code-2 */
const MIN_WORKDAY_IN_MONTH = 22

if (days < MIN_WORKDAY_IN_MONTH) {
  // Return error or something
}

Maka kita semua akan tau bahwa 22 adalah minimal jumlah hari kerja dalam satu bulan, jika tidak memenuhi jumlah hari tersebut maka akan masuk ke dalam kondisi if.

Variabel yang deskriptif 😀

/** Code-3 */
const y = date.now().isoformat()

What the hell is y? mungkin jika seorang javascript developer yang sering memakai class date akan mudah untuk tau, karena date.now() pasti adalah tanggal bulan tahun dan jam sekarang yang di ubah ke ISO Format. Bayangkan jika developer lain yang tidak memakai javascript pasti tidak akan familiar dengan itu, atau jika isi dari variabelnya cukup panjang, maka akan cukup kesulitan.

Coba kita bandingkan dengan Code-4:

/** Code-4 */
const currentDate = date.now().isoformat()

Sangat clear bukan? semua orang akan tau bahwa yang disimpan didalam variabel tersebut adalah merupakan tanggal sekarang.

Hindari konteks yang tidak perlu 💩

Semisal kita punya javascript object seperti Code-5:

/** Code-5 */
const student = {
  studentName: 'Ubaidillah',
  studentAge: 25,
  studentClass: 'X-MIA',
}

Bukankah sudah jelas nama objeknya adalah student? maka tidak perlu di declare ulang di tiap properties nya bukan? dan juga jika objectnya di panggil akan terkesan terlalu panjang dan tidak perlu, contoh: student.studentName

Daripada seperti itu akan lebih baik jika ditulis seperti Code-6:

/** Code-6 */
const student = {
  name: 'Ubaidillah',
  age: 25,
  class: 'X-MIA',
}

Maka jika di panggil, contoh: student.name

Nah sekarang lebih enak dibaca dan lebih meaningful 😀

Pake default value di argumen 🎯

Ceritanya, ini kalkulasi bonus dan minimal bonus defaultnya adalah 5 item.

/** Code-7 */
function calculateBonusItem(bonus) {
  const minBonusItem = bonus || 5
  // Other code
}

Daripada ditulis lagi dalam variabel yang ngeset default, toh jumlah argumen/paramaternya cuman 1 mending langsung defaultnya ditaruh dalam argumen/paramaternya. Contoh Code-8.

/** Code-8 */
function calculateBonusItem(bonus = 5) {
  const minBonusItem = bonus
  // Other code
}

Batasi jumlah argumen max 3 🚫

Contohnya jika lebih dari 3 tuh kaya Code-9

/** Code-9 */
function calculateBonusItem(
  bonus,
  employeName,
  point,
  employeStatus,
  additional,
  employeAge
) {
  // Other code
}

Gaenak kan bacanya? max 3 aja kaya Code-10

/** Code-10 */
function calculateBonusItem(bonus, employeName, point, employeStatus) {
  // Other code
}

Nah kalau semisal lebih dari 3 maka bisa ditaruh dalam sebuah variable yang isinya objek.

/** Code-11 */
const options = {
  employeName: '',
  point: 0,
  employeStatus: '',
  additional: '',
  employeAge: 0,
}
function calculateBonusItem(bonus, options) {
  // Other code
}
const option = {
  employeName: 'Ubaidillah',
  point: 80,
  employeStatus: 'Permanent',
  additional: '',
  employeAge: 0,
}
calculateBonusItem(100, option)

Fungsi melakukan 1 tugas saja

/** Code-12 */

// BAD
function notifyUsers(users) {
  users.forEach((user) => {
    const userRecord = database.lookup(user)
    if (userRecord.isSubsribed()) {
      notify(user)
    }
  })
}

// GOOD
function notifySubscribedUsers(users) {
  users.filter(isSubscribedUser).forEach(notify)
}

function isSubscribedUser(user) {
  const userRecord = database.lookup(user)
  return userRecord.isSubscribed()
}