Best Practice dan Anti-Pattern dalam JavaScript Modern untuk Kode yang Lebih Efisien

Seiring perkembangan JavaScript menjadi bahasa utama dalam pengembangan web modern, kebutuhan akan kode yang rapi, efisien, dan mudah dikelola menjadi semakin penting. Banyak developer pemula fokus pada “bagaimana agar kode berjalan”, padahal tantangan sesungguhnya terletak pada “bagaimana agar kode tetap bisa dikembangkan tanpa merusak bagian lain”. Di sinilah pentingnya memahami Best Practice dan Anti-Pattern dalam JavaScript Modern.

Artikel ini akan membahas berbagai praktik terbaik (best practice) yang sebaiknya diterapkan dalam pengembangan JavaScript modern, serta jebakan umum (anti-pattern) yang perlu dihindari. Tujuannya adalah membantu kamu menulis kode yang tidak hanya bekerja dengan baik, tetapi juga mudah dibaca, diuji, dan dikembangkan oleh tim lain.

Gunakan const dan let dengan Bijak

Di JavaScript modern, penggunaan var sudah jarang disarankan karena memiliki function scope dan dapat menyebabkan hoisting issue. Sebagai gantinya, gunakan const untuk nilai tetap dan let untuk nilai yang bisa berubah.

✅ Best Practice

const MAX_USER = 100;
let currentUser = 0;

❌ Anti-Pattern

var maxUser = 100;
var currentUser = 0; // rentan konflik variabel global

Hindari Global Variable

Variabel global mudah tumpang tindih dan menyebabkan side effect yang sulit dilacak.
Gunakan module pattern atau class encapsulation agar variabel lebih terkontrol.

✅ Best Practice

const App = (() => {
  let users = [];
  function addUser(name) {
    users.push(name);
  }
  return { addUser };
})();

❌ Anti-Pattern

let users = []; // bisa diubah oleh script lain
function addUser(name) {
  users.push(name);
}

Manfaatkan Template Literal untuk String Dinamis

Alih-alih menggabungkan string dengan tanda +, gunakan template literal (``) agar kode lebih rapi dan mudah dibaca.

✅ Best Practice

const name = "Arvian";
console.log(`Halo, ${name}! Selamat datang di aplikasi kami.`);

❌ Anti-Pattern

console.log("Halo, " + name + "! Selamat datang di aplikasi kami.");

Gunakan Arrow Function Secara Tepat

Arrow function memberikan sintaks singkat dan tidak memiliki konteks this sendiri, cocok untuk callback dan fungsi kecil.
Namun, hindari penggunaan berlebihan pada fungsi besar yang butuh this.

✅ Best Practice

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

❌ Anti-Pattern

const obj = {
  name: 'Test',
  showName: () => console.log(this.name) // this tidak merujuk ke obj
};

Pisahkan Logika dengan Modularisasi

Menulis semua fungsi dalam satu file adalah kesalahan umum. Pisahkan kode menjadi modul-modul kecil agar lebih terstruktur dan mudah diuji.

✅ Best Practice

modules/
 ├── userService.js
 ├── productService.js
 └── uiHandler.js

❌ Anti-Pattern
Semua logika ditulis di satu file script.js sepanjang ratusan baris.

Gunakan Destructuring untuk Akses Data

Destructuring membuat pengambilan data dari object atau array lebih efisien dan mudah dibaca.

✅ Best Practice

const user = { name: 'Arvian', age: 25 };
const { name, age } = user;

❌ Anti-Pattern

const name = user.name;
const age = user.age;

Hindari Callback Hell, Gunakan Async/Await

Callback hell membuat kode sulit dibaca. Gunakan Promise atau async/await untuk menangani proses asynchronous dengan rapi.

✅ Best Practice

async function getData() {
  try {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

❌ Anti-Pattern

getData(function() {
  anotherFunc(function() {
    nextStep(function() {
      console.log('Selesai');
    });
  });
});

Jangan Gunakan Magic Number atau String

Hindari menulis angka atau string penting secara langsung di dalam logika. Gunakan konstanta agar lebih mudah dipelihara.

✅ Best Practice

const MAX_RETRY = 3;
if (attempts > MAX_RETRY) {
  console.log('Terlalu banyak percobaan!');
}

❌ Anti-Pattern

if (attempts > 3) {
  console.log('Terlalu banyak percobaan!');
}

Gunakan Defensive Programming

Tambahkan validasi untuk mencegah error tak terduga. Misalnya, sebelum mengakses properti objek, pastikan data ada.

✅ Best Practice

if (user && user.profile) {
  console.log(user.profile.name);
}

Atau lebih singkat:

console.log(user?.profile?.name);

❌ Anti-Pattern

console.log(user.profile.name); // bisa error jika user undefined

Dokumentasikan dan Gunakan Naming Convention yang Jelas

Kode yang bagus tidak hanya berfungsi dengan benar, tapi juga mudah dibaca. Gunakan nama variabel dan fungsi yang deskriptif, serta tambahkan komentar singkat bila perlu.

✅ Best Practice

// Menghitung total harga belanja pengguna
function calculateTotal(cartItems) {
  return cartItems.reduce((sum, item) => sum + item.price, 0);
}

❌ Anti-Pattern

function calc(a) { return a.reduce((x, y) => x + y.p, 0); }

Kesimpulan

Menerapkan Best Practice dan Anti-Pattern dalam JavaScript Modern adalah langkah penting menuju kode yang lebih bersih, efisien, dan profesional. Dengan memahami prinsip modularisasi, penggunaan async/await, template literal, serta menghindari callback hell dan magic number, kamu akan menulis kode yang lebih siap untuk skala besar.

Sebagai developer modern, jangan hanya fokus membuat program “berjalan”, tetapi buatlah kode yang “mudah dipelihara” oleh siapapun di masa depan.