Panduan Membuat Clean Code Dalam JavaScript

Membut kode program kita dengan konsep clean code dapat meningkatkan kualitas kode, pembacaan yang baik dan mudah untuk melakukan upgrade. Untuk itu, berikut adalah beberapa panduan membuat clean code dalam JavaScript.

Table of Contents

1. Nama Variabel yang Deskriptif:

Gunakan nama variabel yang menjelaskan fungsinya dengan baik.
Hindari singkatan yang tidak jelas.

// Buruk
let d = 10;

// Baik
let daysInMonth = 10;

2. Fungsi yang Singkat dan Fokus:

Fungsi sebaiknya tidak terlalu panjang. Fungsi seharusnya hanya melakukan satu tugas.
Jika fungsi terlalu panjang, pertimbangkan untuk memecahnya menjadi fungsi yang lebih kecil.

// Buruk
function processUserData(user) {
    // Melakukan banyak hal
}

// Baik
function getUserData(user) {
    // Mengambil data pengguna
}

function processUserData(data) {
    // Memproses data pengguna
}

3. Hindari Global Scope:

Batasi penggunaan variabel global sebanyak mungkin.
Gunakan modul atau namespace untuk menghindari konflik nama.

// Buruk
let count = 0;

// Baik
const app = {
    count: 0,
    // ...
};

4. Komunikatif pada Komentar:

Komentari kode hanya jika diperlukan dan gunakan untuk menjelaskan mengapa, bukan apa.
Pastikan komentar selalu diperbarui jika kode berubah.

// Buruk
let x = 10; // Set x ke 10

// Baik
let numberOfItems = 10; // Inisialisasi jumlah item

5. Formatting Konsisten:

Gunakan satu gaya formatting dan patuhi aturan indentasi.
Gunakan alat seperti ESLint untuk memastikan konsistensi.

// Buruk
function example(){
  // ...
}

// Baik
function example() {
    // ...
}

6. Hindari Callback Bersarang (Callback Hell):

Gunakan Promise atau async/await untuk mengelola callback secara bersih.

// Callback Hell
fetchData(url, function(response) {
    parseData(response, function(data) {
        displayData(data, function() {
            // ...
        });
    });
});

// Menggunakan Promise
fetchData(url)
    .then(parseData)
    .then(displayData)
    .catch(handleError);

// Menggunakan async/await
try {
    const response = await fetchData(url);
    const data = parseData(response);
    await displayData(data);
} catch (error) {
    handleError(error);
}

7. Menggunakan Konstanta untuk Nilai Tetap:

Gunakan konstanta untuk nilai yang tetap dan tidak berubah.
Gunakan huruf besar dan pisahkan kata dengan underscore untuk nama konstanta.

// Buruk
let taxRate = 0.10;

// Baik
const TAX_RATE = 0.10;

8. Pemisahan Logika dan Antarmuka:

Pisahkan logika bisnis dari antarmuka pengguna untuk meningkatkan modularitas.

// Buruk
function displayUserDetails(user) {
    // Menampilkan detail pengguna langsung ke DOM
}

// Baik
function getUserDetails(user) {
    // Mendapatkan detail pengguna
}

function displayUserDetailsInUI(userDetails) {
    // Menampilkan detail pengguna ke DOM
}

9. Pengujian yang Baik:

Tulis unit test yang baik untuk memastikan kode dapat diuji dan bekerja dengan benar.
Gunakan alat pengujian seperti Jest atau Mocha.

// Buruk
function add(x, y) {
    return x + y;
}

// Baik
function add(x, y) {
    if (typeof x !== 'number' || typeof y !== 'number') {
        throw new Error('Parameters must be numbers');
    }
    return x + y;
}

10. Refaktor Kode yang Terus-Menerus:

Selalu perbarui dan refaktor kode Anda saat Anda memahami lebih baik atau menemui cara yang lebih baik untuk melakukannya.
Hindari kode yang redundan atau tidak perlu.

// Buruk
if (user.isAdmin === true) {
    // ...
}

// Baik
if (user.isAdmin) {
    // ...
}

Menerapkan prinsip-prinsip ini akan membantu Anda membuat clean code yang lebih mudah dipahami, dipelihara, dan diperbarui oleh Anda atau anggota tim Anda. Ingatlah bahwa clean code adalah praktik yang terus-menerus ditingkatkan seiring waktu.

Baca juga:

Semoga artikel Panduan Membuat Clean Code Dalam JavaScript ini bermanfaat.