Percabangan dan perulangan

Idenya

Program menjadi berguna saat ia memutuskan (apakah pesanan ini berhak mendapat gratis ongkir?) dan mengulang (jumlahkan setiap item di keranjang). Alat JavaScript untuk keduanya mirip kebanyakan bahasa bergaya C: kurung kurawal dan tanda kurung alih-alih indentasi Python. Logikanya sama; jebakannya berbeda, terutama soal nilai mana yang dihitung sebagai "benar".

if, else if, else

Aturan ongkir Toko Kita punya tiga tingkat: gratis untuk pesanan 300000 atau lebih, 10000 mulai 150000, dan 20000 untuk yang lebih kecil. Itu rangkaian keputusan, dan bentuknya hampir sama dengan if/elif/else di Python, hanya dengan tanda kurung dan kurung kurawal:

function shippingFee(total) {
  if (total >= 300000) {
    return 0;
  } else if (total >= 150000) {
    return 10000;
  } else {
    return 20000;
  }
}

console.log(shippingFee(450000), shippingFee(200000), shippingFee(50000));

0 10000 20000

Kondisi ditulis di dalam tanda kurung, blok di dalam kurung kurawal. Urutan itu penting: kondisi benar yang pertama yang menang, jadi cek kasus yang paling spesifik lebih dulu.

Operator ternary

Untuk memilih di antara dua nilai, ada bentuk satu baris: condition ? valueIfTrue : valueIfFalse.

const stock = 0;
const label = stock > 0 ? "In stock" : "Sold out";
console.log(label);

Sold out

Gunakan untuk pilihan nilai yang sederhana. Untuk apa pun yang punya lebih dari dua cabang atau efek samping, if lebih mudah dibaca.

Truthy dan falsy

if menerima nilai apa pun, bukan hanya boolean. Enam nilai ini dihitung sebagai false (mereka "falsy"): false, 0, "" (string kosong), null, undefined dan NaN. Semua yang lain truthy, termasuk "0", [] dan {}.

const checks = [0, "", "0", [], null, "Ayu"];
for (const value of checks) {
  console.log(JSON.stringify(value), value ? "truthy" : "falsy");
}

0 falsy
"" falsy
"0" truthy
[] truthy
null falsy
"Ayu" truthy

Jebakannya: array kosong itu truthy, tidak seperti di Python. Cek cart.length > 0, bukan if (cart).

Melindungi dari data yang hilang: ?? dan ?.

Data dari formulir dan server sering tidak lengkap. Seorang pelanggan belum mengatur nama panggilan, atau belum memasukkan alamat. Di JavaScript, membaca sesuatu yang tidak ada memberimu undefined atau null, dan mencoba melangkah lebih jauh, seperti membaca kota dari alamat yang tidak ada, membuat halaman crash. Dua operator kecil menanganinya dengan aman:

const user = { name: "Ayu", address: null, settings: { currency: "IDR" } };

console.log(user.nickname ?? user.name);          // ?? : use the right side if the left is null/undefined
console.log(user.address?.city);                  // ?. : stop safely if address is null
console.log(user.settings?.currency ?? "IDR");

const discount = 0;
console.log(discount || 10, discount ?? 10);      // || treats 0 as missing; ?? doesn't

Ayu
undefined
IDR
10 0

• a ?? b memberikan b hanya saat a bernilai null atau undefined.
• a?.b memberikan undefined alih-alih crash saat a bernilai null atau undefined. Tanpanya, user.address.city akan memunculkan "Cannot read properties of null".
• a || b memberikan b untuk a yang falsy apa pun, termasuk 0 dan "", yang sering menjadi bug: diskon sungguhan bernilai 0 diganti dengan 10.

switch

switch membandingkan satu nilai dengan beberapa pilihan memakai ===:

function roastNote(roast) {
  switch (roast) {
    case "light":
      return "Bright and fruity";
    case "medium":
      return "Balanced and sweet";
    case "dark":
      return "Bold and smoky";
    default:
      return "Unknown roast";
  }
}

console.log(roastNote("medium"), "|", roastNote("extra"));

Balanced and sweet | Unknown roast

Di dalam function, return mengakhiri setiap case. Di luar function, setiap case butuh break, kalau tidak eksekusinya "jatuh" ke case berikutnya. Objek lookup (const notes = { light: "...", dark: "..." }; notes[roast] ?? "Unknown") sering lebih rapi.

Perulangan

Sebagian besar pekerjaan di halaman toko adalah menyusuri daftar: setiap barang di keranjang, setiap produk dalam sebuah kategori. JavaScript punya beberapa jenis loop, dan contoh ini memakai tiga yang paling sering akan kamu temui, pada keranjang kecil:

const cart = [
  { name: "Arabica Gayo", price: 95000 },
  { name: "Paper filters", price: 35000 },
  { name: "French Press", price: 245000 },
];

for (let i = 0; i < cart.length; i++) {          // classic counter loop
  console.log(i + 1, cart[i].name);
}

for (const item of cart) {                        // for...of: each value
  if (item.price < 50000) continue;               // skip this one
  console.log("Premium:", item.name);
}

let stock = 10;
let days = 0;
while (stock > 0) {                               // repeat while a condition holds
  stock -= 3;
  days++;
}
console.log("Sold out after", days, "days");

1 Arabica Gayo
2 Paper filters
3 French Press
Premium: Arabica Gayo
Premium: French Press
Sold out after 4 days

• for (let i = 0; i < n; i++) saat kamu butuh indeksnya.
• for (const item of array) untuk setiap nilai: pilihan sehari-hari.
• while (condition) saat kamu tidak tahu sebelumnya berapa putaran yang dibutuhkan. Pastikan kondisinya pada akhirnya menjadi false.
• break keluar dari loop; continue melompat ke putaran berikutnya.

Hindari for...in pada array: ia melakukan loop atas key (sebagai string), bukan nilai. Itu dimaksudkan untuk objek, dan bahkan di sana Object.entries(obj) dengan for...of lebih jelas.

Mengapa ini penting untuk kode yang bersih

Return lebih awal untuk menjaga kode tetap datar: if (!user) return; di bagian atas lebih baik daripada membungkus seluruh function di dalam if. Utamakan ?? daripada || untuk default supaya nol yang valid tetap bertahan. Dan saat rangkaian if memetakan nilai-nilai tetap ke hasil, objek lookup mengubah sepuluh baris percabangan menjadi data.

Rangkuman

• if (cond) { } else if (cond) { } else { }; cabang benar yang pertama yang menang.
• cond ? a : b untuk pilihan nilai.
• Falsy: false, 0, "", null, undefined, NaN. [] dan {} truthy.
• ?? memberi default hanya untuk null/undefined; ?. membaca dengan aman melewati objek yang hilang.
• switch dengan return/break, atau objek lookup.
• for, for...of, while; break dan continue. Bukan for...in pada array.