Media sosial, artikel, dan blog dipenuhi dengan nasehat bagaimana membuat kode lebih mudah dibaca, agar tampil sebagai programmer senior. Mereka tampaknya menawarkan kebijaksanaan murni yang siap diterapkan dalam kode produksi Anda.

Dan inilah saya dengan pesan: “Tolong, jangan. Setidaknya tidak membabi buta”.

Ya, ini mungkin kontroversial, namun perlu ada seseorang yang memberikan perspektif alternatif. Tip yang disebutkan sering kali didasarkan pada gagasan: “Apa yang terlihat bagus itu bagus”. Masalahnya, ternyata tidak. Tidak selalu.

Sebelum Anda mulai menerapkan sintaksis dari postingan dan reel, luangkan waktu sejenak untuk mempertimbangkan kode itu sendiri. Bagaimana bahasa pemrograman bekerja? Masalah apa yang perlu diselesaikan? Apakah saran tersebut sesuai dengan data saya?

Mari kita tunjukkan beberapa contoh saran kode JavaScript “senior”, yang belum tentu merupakan solusi jitu.

Contoh satu: Hanya metode array

// very simplified example of CSV content
const csvRows = [
  { id: 1, value: 10 },
  { id: 2, value: 20 },
  { id: 3, value: 30 },
  { id: 4, value: 40 },
  { id: 5, value: 50 }
];

// "junior" syntax
let sum = 0;

for (const row of csvRows) {
  if (row.value > 20) {
    sum += row.value * 1.21;
  }
}

// "senior" code
const result = csvRows
  .filter(row => row.value > 20)
  .map(row => row.value * 1.21)
  .reduce((acc, value) => acc + value, 0);

Prinsip: Ganti perulangan for / while untuk metode array

Pendekatan “senior” tampak lebih mudah dibaca, namun dapat menimbulkan masalah kinerja. Setiap kali Anda memanggil metode array, seluruh input array (output dari metode array sebelumnya) diulangi lagi.

Jika Anda merangkai tiga metode array, ini mirip dengan menulis tiga blok kode loop “untuk” di bawah. Apakah Anda akan melakukannya tanpa fungsi sintaksis yang elegan?

Dengan metode array koleksi pendek tidak menjadi masalah. Tapi coba file CSV, yang memiliki beberapa juta baris dan Anda menerapkan proses transformasi multilangkah.

Selain itu, metode array menggunakan sintaks panggilan balik. Hal ini berpotensi menyebabkan masalah eksekusi ketika kode dicampur dengan fungsi asinkron. Menggunakan loop “for” yang lama menyederhanakan kontrol atas waktu kode, karena kode asinkron yang diperlukan dieksekusi dalam langkah iterasi.

Contoh kedua: Objek sebagai saklar

// ugly code, that is unpopular
  switch (name) {
    case 'Alice':
      return 'Hello, Alice!';
    case 'Bob':
      return 'Hi, Bob!';
    case 'Eve':
      return 'Hey, Eve!';
    default:
      throw new Error(`Unsupported name with value ${name}`);
  }

//... or this version also
  if (name === 'Alice') {
    return 'Hello, Alice!';
  } else if (name === 'Bob') {
    return 'Hi, Bob!';
  } else if (name === 'Eve') {
    return 'Hey, Eve!';
  } else {
    throw new Error(`Unsupported name with value ${name}`)
  }

// and "senior" alternative
function getGreetingUsingObject(name) {
  const greetingMessages = {
    Alice: 'Hello, Alice!',
    Bob: 'Hi, Bob!',
    Eve: 'Hey, Eve!'
  };

  return greetingMessages[name] || throw new Error(`Unsupported name with value ${name}`);
}

Prinsip: Gunakan objek JavaScript sebagai alternatif Switch/If-Else.

Tidak, tolong jangan.

Masalahnya terletak pada sifat objek, yang terutama dimaksudkan sebagai wadah statis untuk data.

Objek memerlukan ruang memori sendiri yang perlu dikelola. Itu tidak dirancang untuk menangani manajemen kunci dinamis dengan cepat, meskipun ada kemungkinan untuk mengatur kunci dari properti.

Untuk kasus sederhana, seperti jumlah hari dalam seminggu, kekurangan objek tidak menjadi masalah. Namun, mungkin ada sistem dengan seluruh pohon keputusan termasuk logika bertingkat.

Selain itu, objek tidak menjamin keberadaan nilai di bawah kunci tertentu. Tidak ada jaminan bahwa kuncinya berisi apa pun. Saat menangani masalah ini, Anda harus berhati-hati dan menerapkan logika ekstra untuk mencegah pengecualian tak terduga atau penggunaan nilai default, yang tidak seharusnya.

Sebaliknya, pernyataan switch jelek tidak memerlukan memori tambahan apa pun pada aplikasi Anda. Ini adalah elemen logis dari kode yang dirancang untuk menangani keputusan berdasarkan nilai dinamis dan mencakup semua kemungkinan berdasarkan desain. Pendekatan if-else yang sama.

Jika Anda tidak dapat menerima peralihan / if-else dalam kode Anda, coba Peta JavaScript.

const greetingsMap = new Map([
  ['Alice', 'Hello, Alice!'],
  ['Bob', 'Hi, Bob!'],
  ['Eve', 'Hey, Eve!']
]);

function greetPerson(name) {
  const greeting = greetingsMap.get(name)
  
  if (!greeting) 
    throw new Error(`Unsupported name with value ${name}`)
  
  return greeting
}

Peta JavaScript adalah salah satu bagian bahasa yang paling diremehkan. Koleksi bawaan ini dirancang secara eksplisit untuk mengelola struktur dinamis nilai kunci dan melakukannya dengan cepat. Kuncinya pun tidak harus berupa string, terserah Anda.

Peta mengonsumsi memori serupa dengan objek. Namun mewakili alat kompleks untuk hubungan nilai kunci yang dinamis.

Setiap kali Anda mengambil data dari Peta, hal itu memperhitungkan kemungkinan tidak adanya nilai di bawah kunci. Karena alasan ini “Map‹T›.get()” mengembalikan tipe “T | belum diartikan". Desain ini mendorong Anda untuk menutup kemungkinan hilangnya nilai setiap kali Anda mengambil data dari Peta.

Contoh ketiga: Operator ternary dimana-mana

// ugly version
function checkPaymentMethodIfElse(paymentMethod) {
    if (paymentMethod === "cash") {
        return "Payment method is cash.";
    } else if(paymentMethod === "card") {
        return "Payment method is card."; 
    } else {
        throw new Error("Unknown payment method")
    }
}

// ternary version
function checkPaymentMethodTernary(paymentMethod) {
    return paymentMethod === "cash" ? "Payment method is cash." : "Payment method is card.";
}

Prinsip: Ganti blok if-else dengan operator ternary.

Menggunakan ternary bukanlah pilihan yang buruk. Namun penting untuk dipahami, bahwa ternary didedikasikan untuk situasi, ketika output selalu benar/salah dan tidak pernah apa pun. Seperti pertanyaan “Apakah database terhubung?”

Ilustrasi metode pembayaran menunjukkan penerapan operator ternary yang buruk dalam kode JavaScript. Ini menggambarkan situasi di mana metode pembayaran saat ini terbatas hanya pada “tunai” atau “kartu”. Mirip dengan peluncuran toko online dengan pilihan pembayaran terbatas.

Namun, pendekatan ini dapat menimbulkan komplikasi ketika metode pembayaran tambahan diperkenalkan. Diperlukan untuk memodifikasi seluruh blok kode, karena ternary tidak dapat bekerja dengan lebih dari dua kemungkinan.

Selanjutnya, contoh kode membuka ruang untuk masalah serius. Jika metode pembayaran dari argumen fungsi tidak valid, versi ternary akan memilih opsi “bukan tunai” tidak peduli berapa nilai yang diberikan. Dengan kata lain, operator ternary tidak dapat bekerja dengan baik menggunakan default jika nilai tidak valid.

Alasan-alasan ini menunjukkan mengapa versi if-else atau switch atau Map dapat dianggap sebagai pilihan yang lebih baik.

Ringkasan

Internet penuh dengan nasihat universal, namun tidak semuanya sempurna. Rekomendasi saya adalah berhati-hati. Pengaruh kode memang populer, tetapi tidak selalu mencakup semua kemungkinan.

Jangan melebih-lebihkan upaya menulis kode yang cantik untuk orang lain. Repositori aplikasi Anda tidak mirip dengan buku terlaris. Meskipun keterbacaan sangat berharga, hal ini bukanlah tujuan utama kode, atau ukuran mutlak untuk membedakan antara programmer “junior” atau “senior”.

Anda GUNAKAN kode tersebut untuk menginstruksikan komputer dalam memecahkan masalah. Sintaks kode harus melayani tujuan mencapai solusi yang paling efektif. Ketika aplikasi menuntut kinerja tinggi, sintaksis kode estetika tidak diutamakan. Inilah alasan mengapa pemrogram melakukan tinjauan kode, bukan pratinjau.