10 Langkah Menulis Kode JavaScript yang Mudah Dibaca

Hastin Lia • 6 Januari 2025 - 3 Min min read | Technology

Menulis kode JavaScript yang mudah dibaca tidak hanya penting untuk pengembang individu tetapi juga bagi tim yang bekerja bersama. Kode yang rapi dan efektif meningkatkan produktivitas, mempermudah debugging, dan menjaga keberlanjutan proyek dalam jangka panjang.

Berikut adalah 10 langkah praktis untuk memastikan kode JavaScript Anda mudah dibaca dan efektif, beserta contoh implementasi dan hasilnya.

1. Gunakan Penamaan Variabel yang Deskriptif

Gunakan nama variabel yang jelas dan mendeskripsikan tujuan variabel tersebut. Hal ini memudahkan siapa saja yang membaca kode untuk memahami fungsinya.

Contoh Kode:

let userAge = 25;
let doubleAge = userAge * 2;
console.log(`Double of user age: ${doubleAge}`);

Hasil Eksekusi:
Double of user age: 50

2. Terapkan Konsistensi dalam Format Kode

Gunakan formatter seperti Prettier untuk memastikan kode Anda seragam. Misalnya, gunakan spasi 2 atau 4 untuk indentasi, dan hindari mencampur tanda kutip.

Sebelum Konsistensi:

function greet(name) { console.log(“Hello, “+name);}

Setelah Konsistensi:
function greet(name) {
console.log(`Hello, ${name}`);
}
greet(“Alice”);

Hasil Eksekusi:
Hello, Alice

3. Hindari Penggunaan Magic Numbers

Magic numbers adalah angka yang muncul tanpa penjelasan. Gunakan konstanta untuk memberikan konteks pada angka tersebut.

Contoh Kode:

const DISCOUNT_AMOUNT = 50;
let totalPrice = 300;
let discountPrice = totalPrice – DISCOUNT_AMOUNT;
console.log(`Total after discount: ${discountPrice}`);

Hasil Eksekusi:
Total after discount: 250

4. Gunakan Komentar yang Jelas dan Relevan

Komentar digunakan untuk menjelaskan logika yang kompleks, bukan untuk mendeskripsikan hal-hal yang sudah jelas.

Contoh Kode:

// Menghitung total harga dengan pajak 10%
let price = 100;
let totalWithTax = price * 1.1;
console.log(`Total with tax: ${totalWithTax}`);

Hasil Eksekusi:
Total with tax: 110

5. Pecah Kode Menjadi Fungsi-Fungsi Kecil

Fungsi kecil mempermudah pemeliharaan dan pengujian kode.

Contoh Kode:

function calculateTotal(price) {
return price * 1.1; // Tambahkan pajak 10%
}

function applyDiscount(price, discount) {
return price – discount;
}

let price = 200;
let total = calculateTotal(price);
let discountedTotal = applyDiscount(total, 50);
console.log(`Final total: ${discountedTotal}`);

Hasil Eksekusi:
Final total: 170

6. Hindari Duplikasi Kode

Gunakan fungsi untuk mencegah pengulangan kode.

Contoh Kode:

function calculateTotalWithTax(price) {
return price + price * 0.1;
}

let product1Price = 100;
let product2Price = 200;

let total1 = calculateTotalWithTax(product1Price);
let total2 = calculateTotalWithTax(product2Price);

console.log(`Total product 1: ${total1}`);
console.log(`Total product 2: ${total2}`);

Hasil Eksekusi:
Total product 1: 110
Total product 2: 220

7. Gunakan Fitur ES6 atau yang Lebih Baru

Fitur ES6 seperti arrow function dan template literals membuat kode lebih ringkas.

Contoh Kode:

const greet = (name) => `Hello, ${name}`;
console.log(greet(“Bob”));

Hasil Eksekusi:
Hello, Bob

8. Tangani Error dengan Baik

Gunakan try-catch untuk menangani error dan memberikan pesan yang jelas.

Contoh Kode:

try {
let data = JSON.parse(‘{“name”:”Alice”}’);
console.log(data.name);
} catch (error) {
console.error(“Failed to parse JSON:”, error.message);
}

Hasil Eksekusi:
Alice

9. Tulis Dokumentasi

Dokumentasi membantu pengembang lain memahami fungsi dan tujuan kode.

Contoh Kode:

/**
* Menghitung harga total dengan pajak.
* @param {number} price – Harga awal.
* @returns {number} – Harga total setelah pajak.
*/
function calculateTotal(price) {
return price * 1.1;
}
console.log(calculateTotal(100));

Hasil Eksekusi:
110

10. Uji Kode Anda

Gunakan framework pengujian seperti Jest untuk memastikan kode Anda berfungsi dengan benar.

Contoh Kode Pengujian dengan Jest:

test(‘calculateTotal adds 10% tax’, () => {
expect(calculateTotal(100)).toBe(110);
});

Kesimpulan

Dengan mengikuti 10 langkah di atas, Anda dapat menulis kode JavaScript yang lebih mudah dibaca, efisien, dan mudah dipelihara. Langkah-langkah ini akan meningkatkan kualitas proyek Anda, sekaligus mempermudah kolaborasi dengan tim. Cobalah untuk menerapkan langkah-langkah ini dalam proyek JavaScript Anda selanjutnya!

Temukan Lowongan Pekerjaan Di MSBU!

Bagikan Artikel Ini