Tips Menulis Kode JavaScript yang Lebih Clean & Rapi

Ketika kamu mulai belajar JavaScript, hal pertama yang penting adalah: kode kamu bisa jalan. Tapi setelah itu, ada satu hal yang jauh lebih penting: apakah orang lain (atau kamu di masa depan) bisa membaca dan memahami kode itu?

Menulis kode yang bersih (clean) dan rapi bukan hanya urusan gaya — itu adalah kebiasaan penting bagi setiap developer. Di dunia nyata, kamu tidak bekerja sendirian. Kamu akan bekerja dengan tim, merevisi kode lama, memperbaiki bug, dan mengembangkan fitur baru dari kode yang sama.

Maka dari itu, yuk kita bahas tips praktis dan mindset untuk menulis kode JavaScript yang lebih clean dan rapi!

1. Gunakan Nama Variabel dan Fungsi yang Jelas

Kode yang baik menjelaskan dirinya sendiri, bahkan tanpa komentar. Salah satu cara utama untuk mencapai itu adalah dengan penamaan yang baik.

Tips:

• Gunakan nama bermakna, bukan singkatan misterius.
• Gunakan kata kerja untuk fungsi (getUser(), saveData())
• Gunakan kata benda untuk variabel (userName, emailList)

Buruk:

let x = 10;
function d(u) { return u * 2; }

Baik:

let userAge = 10;
function doubleAge(age) { return age * 2; }

Penamaan yang baik mengurangi kebutuhan komentar dan meningkatkan pemahaman kode secara instan.

2. Gunakan Struktur & Indentasi yang Konsisten

Kode JavaScript kamu sebaiknya punya struktur yang teratur dan rapi. Gunakan indentasi (spasi/tab) yang konsisten.

Tanpa indentasi:

function login(user){if(user.active){return true;}else{return false;}}

Dengan indentasi:

function login(user) {
  if (user.active) {
    return true;
  } else {
    return false;
  }
}

Gunakan formatter otomatis seperti Prettier agar kode selalu tersusun rapi secara otomatis.

3. Gunakan const dan let, Hindari var

Sejak ES6, JavaScript mengenalkan let dan const sebagai pengganti var yang sering menimbulkan masalah.

• Gunakan const untuk nilai yang tidak akan diubah
• Gunakan let untuk nilai yang bisa berubah
• Hindari var, karena hoisting-nya bisa bikin bug

Contoh:

const PI = 3.14;
let counter = 0;

4. Pecah Kode Jadi Fungsi-Fungsi Kecil

Daripada menulis fungsi panjang dan kompleks, lebih baik pecah jadi beberapa fungsi kecil. Ini membantu pemahaman dan membuat fungsi bisa dipakai ulang.

Buruk:

function handleUser(user) {
  if (user.name === "") {
    alert("Nama wajib diisi");
  }
  if (user.email === "") {
    alert("Email wajib diisi");
  }
  // simpan user
  database.save(user);
  // kirim email selamat datang
  sendEmail(user.email);
}

Baik:

function validateUser(user) {
  if (!user.name) throw new Error("Nama wajib diisi");
  if (!user.email) throw new Error("Email wajib diisi");
}

function saveUser(user) {
  database.save(user);
}

function sendWelcomeEmail(email) {
  sendEmail(email);
}

function handleUser(user) {
  validateUser(user);
  saveUser(user);
  sendWelcomeEmail(user.email);
}

5. Hindari Pengulangan Kode (DRY Principle)

DRY = Don’t Repeat Yourself.
Jika kamu menulis kode yang sama berulang kali, ubah jadi fungsi atau loop.

Duplikat:

console.log("Halo, John");
console.log("Halo, Sarah");
console.log("Halo, Rina");

DRY:

function greet(name) {
  console.log(`Halo, ${name}`);
}

["John", "Sarah", "Rina"].forEach(greet);

6. Gunakan Template Literal untuk String

Hindari penggunaan operator + saat menyusun string. Gunakan template literal agar lebih clean.

Kurang rapi:

let msg = "Halo " + name + ", selamat datang!";

Clean:

let msg = `Halo ${name}, selamat datang!`;

7. Hindari "Magic Number" dan Nilai Misterius

Magic number = angka yang muncul tiba-tiba dan tidak jelas artinya.
Gunakan variabel konstan yang menjelaskan maksudnya.

Buruk:

if (score > 75) { ... }

Baik:

const PASSING_SCORE = 75;
if (score > PASSING_SCORE) { ... }

8. Komentar Seperlunya, Jangan Lebay

Komentar bagus untuk menjelaskan:

• Logika rumit
• Kenapa kamu menulis kode dengan cara tertentu
• Catatan untuk developer lain

Tapi hindari komentar yang hanya menjelaskan hal yang sudah jelas dari kodenya.

Komentar berlebihan:

// Menambahkan 1 ke nilai counter
counter += 1;

Komentar berguna:

// Increment untuk menghitung jumlah klik user
counter += 1;

9. Gunakan Modul untuk Memisahkan Kode

Kalau proyekmu mulai membesar, pisahkan kode ke dalam beberapa file/module sesuai fungsinya.

Misalnya:

• auth.js → fungsi login, register
• api.js → fungsi HTTP request
• utils.js → fungsi bantuan

Gunakan export dan import:

// auth.js
export function login() { ... }

// main.js
import { login } from './auth.js';

10. Gunakan Tools Seperti ESLint & Prettier

• ESLint: Memeriksa kesalahan umum dan gaya penulisan.
• Prettier: Merapikan format kode secara otomatis.

Keduanya bisa dipasang di VS Code agar setiap kamu save file, kodenya langsung rapi.

npm install --save-dev eslint prettier

Kesimpulan

Menulis kode JavaScript yang clean bukan cuma buat dipamerin, tapi untuk:

• Mencegah bug
• Memudahkan kerja tim
• Bikin revisi lebih cepat
• Bikin kamu makin jago dan profesional