Bab 2: Kualitas Kode

function hitungDiskon(harga, persen) {
  let potongan = harga * persen / 100;
  let hargaAkhir = harga - potongan; // pasang breakpoint di sini
  return hargaAkhir;
}

function hitungDiskon(harga, persen) {
  let potongan = harga * persen / 100;
  debugger; // browser akan berhenti di sini
  let hargaAkhir = harga - potongan;
  return hargaAkhir;
}

for (let i = 0; i < 5; i++) {
  console.log("Iterasi ke:", i);
}

// ✅ BENAR — kurung buka di baris yang sama
if (kondisi) {
  lakukanIni();
}

// ❌ SALAH — kurung buka di baris baru (bukan standar JS)
if (kondisi)
{
  lakukanIni();
}

// ✅ BENAR — ada spasi, mudah dibaca
function hitungLuas(panjang, lebar) {
  let luas = panjang * lebar;
  return luas;
}

// ❌ SALAH — rapet, susah dibaca
function hitungLuas(panjang,lebar){
let luas=panjang*lebar;
return luas;
}

// ❌ Terlalu panjang
if (umur >= 18 && punyaKTP === true && sudahDaftar === true && tidakDiblokir === true) {

// ✅ Dipecah
if (
  umur >= 18 &&
  punyaKTP === true &&
  sudahDaftar === true &&
  tidakDiblokir === true
) {
  // ...
}

function prosesOrder(order) {
  // Validasi
  let isValid = cekOrder(order);

  // Hitung total
  let total = hitungTotal(order.items);

  // Kirim
  kirimOrder(order, total);
}

// ❌ Nesting dalam — susah dibaca
function cekAkses(user) {
  if (user) {
    if (user.umur >= 18) {
      if (user.verified) {
        return true;
      }
    }
  }
  return false;
}

// ✅ Early return — lebih flat
function cekAkses(user) {
  if (!user) return false;
  if (user.umur < 18) return false;
  if (!user.verified) return false;

  return true;
}

// ✅ Selalu pakai titik koma
let nama = "Budi";
console.log(nama);

// ❌ Tanpa titik koma — bisa bikin bug tersembunyi
let nama = "Budi"
console.log(nama)

# Install
npm install -g eslint

# Jalankan
eslint namaFile.js

// Tambahkan 1 ke i
i++;

// Cek apakah umur lebih dari 18
if (umur > 18) { ... }

// Loop dari 0 sampai 9
for (let i = 0; i < 10; i++) { ... }

// Pakai setTimeout 0ms untuk jalankan setelah DOM selesai render
// (tanpa ini, elemen belum ada di halaman)
setTimeout(() => {
  initSlider();
}, 0);

// Format harga tanpa library karena Intl.NumberFormat
// belum support di target browser kita (IE11)
function formatHarga(angka) {
  return angka.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

// ❌ Pakai komentar untuk jelaskan blok kode
// Cek apakah bilangan prima
for (let j = 2; j < n; j++) {
  if (n % j === 0) return false;
}

// ✅ Buat fungsi — nama fungsi = komentar
function isPrima(n) {
  for (let j = 2; j < n; j++) {
    if (n % j === 0) return false;
  }
  return true;
}

/**
 * Hitung luas lingkaran.
 *
 * @param {number} radius - Jari-jari lingkaran
 * @returns {number} Luas lingkaran
 */
function luasLingkaran(radius) {
  return Math.PI * radius * radius;
}

// BURUK — apa itu a, b, c?
let a = getUser();
let b = a.name;
let c = calculateAge(a.birthDate);

// BAIK — jelas
let user = getUser();
let userName = user.name;
let userAge = calculateAge(user.birthDate);

// BURUK
let brsr = navigator.userAgent;
let lst = document.querySelectorAll("li");

// BAIK
let browserInfo = navigator.userAgent;
let listItems = document.querySelectorAll("li");

// BURUK — "data" bisa apa aja
let data = fetchUsers();
let data2 = processData(data);
let item = data2[0];

// BAIK — spesifik
let users = fetchUsers();
let activeUsers = filterActive(users);
let firstActiveUser = activeUsers[0];

// BURUK — `temp` berubah makna
let temp = getUserInput();
temp = parseInt(temp);
temp = temp * 2;
temp = `Hasil: ${temp}`;

// BAIK — variabel baru untuk tiap tahap
let input = getUserInput();
let angka = parseInt(input);
let hasil = angka * 2;
let pesan = `Hasil: ${hasil}`;

// BURUK — nama "cek" tapi ternyata juga mengubah data
function cekEmail(email) {
  if (!email.includes("@")) {
    showError("Email tidak valid"); // side effect!
    logAttempt(email); // side effect!
    return false;
  }
  return true;
}

// BAIK — pisahkan tanggung jawab
function isEmailValid(email) {
  return email.includes("@");
}

// Panggil terpisah
if (!isEmailValid(email)) {
  showError("Email tidak valid");
  logAttempt(email);
}

describe("namaFungsi", function() {

  it("deskripsi perilaku yang diharapkan", function() {
    assert.equal(hasilAktual, hasilYangDiharapkan);
  });

});

describe("pangkat", function() {

  it("2 pangkat 3 = 8", function() {
    assert.equal(pangkat(2, 3), 8);
  });

  it("3 pangkat 2 = 9", function() {
    assert.equal(pangkat(3, 2), 9);
  });

  it("5 pangkat 1 = 5", function() {
    assert.equal(pangkat(5, 1), 5);
  });

});

// ❌ BURUK — 3 cek dalam 1 test
it("pangkat bekerja", function() {
  assert.equal(pangkat(2, 3), 8);
  assert.equal(pangkat(3, 4), 81);
  assert.equal(pangkat(5, 2), 25);
});

// ✅ BAIK — terpisah, kalau gagal langsung tahu yang mana
it("2 pangkat 3 = 8", function() {
  assert.equal(pangkat(2, 3), 8);
});

it("3 pangkat 4 = 81", function() {
  assert.equal(pangkat(3, 4), 81);
});

describe("pangkat", function() {

  describe("x pangkat 3", function() {
    it("2 pangkat 3 = 8", function() {
      assert.equal(pangkat(2, 3), 8);
    });

    it("3 pangkat 3 = 27", function() {
      assert.equal(pangkat(3, 3), 27);
    });
  });

  describe("kasus error", function() {
    it("pangkat negatif = NaN", function() {
      assert.isNaN(pangkat(2, -1));
    });
  });

});

describe("database test", function() {

  before(function() {
    // Jalan SEKALI sebelum semua test
    connectDB();
  });

  after(function() {
    // Jalan SEKALI setelah semua test
    disconnectDB();
  });

  beforeEach(function() {
    // Jalan sebelum SETIAP test
    clearTestData();
  });

  it("bisa simpan user", function() { ... });
  it("bisa hapus user", function() { ... });
});

// Kode modern (pakai ??)
let tinggi = tinggi ?? 100;

// Setelah di-transpile (bisa jalan di browser lama)
let tinggi = (tinggi !== undefined && tinggi !== null) ? tinggi : 100;

// Math.trunc belum ada di browser lama
// Polyfill = kita bikin sendiri implementasinya

if (!Math.trunc) {
  Math.trunc = function(angka) {
    return angka < 0 ? Math.ceil(angka) : Math.floor(angka);
  };
}