If Else dan Perulangan di JavaScript

Di artikel kemarin kita belajar menyimpan data di variabel dan mengolahnya dengan operator. Tapi program yang cuma jalan lurus dari atas ke bawah itu seperti kereta yang tidak bisa belok: kaku dan tidak bisa merespons apa-apa. Program yang beneran berguna bisa mengambil keputusan dan mengulang pekerjaan.

Bayangkan aplikasi ojek online. Kalau saldo kurang, ia menolak pesanan. Kalau driver ditemukan, ia menampilkan peta. Itu semua keputusan. Lalu bayangkan ia harus menampilkan 50 driver satu per satu ke layar. Tidak mungkin ditulis 50 baris kode manual. Itu gunanya perulangan.

Dua kemampuan inilah yang mengubah JavaScript dari kalkulator jadi sesuatu yang terasa "pintar". Di akhir artikel ini kamu bisa bikin program yang memilih jalannya sendiri dan mengerjakan hal berulang tanpa ngeluh. Ini fondasi yang akan dipakai di semua proyek JavaScript, termasuk aplikasi to-do list di akhir seri ini.

If Else: Lampu Lalu Lintasnya Program

Analogi paling pas untuk if else adalah lampu lalu lintas. Lampu merah: berhenti. Lampu hijau: jalan. Program mengecek satu kondisi, lalu memilih satu dari dua jalan.

let umur = 17;
if (umur >= 17) {
  console.log("Boleh bikin SIM");
} else {
  console.log("Belum boleh bikin SIM");
}

Cara bacanya: "kalau isi kotak umur lebih dari atau sama dengan 17, kerjakan blok pertama. Kalau tidak, kerjakan blok kedua." Kondisi di dalam kurung harus menghasilkan boolean, true atau false. Di sinilah operator perbandingan dari artikel kemarin (>=, ===, dan kawan-kawan) akhirnya unjuk gigi.

Kalau pilihannya lebih dari dua, rangkai dengan else if. Bayangkan perempatan dengan banyak rambu:

let nilai = 75;
if (nilai >= 90) {
  console.log("A");
} else if (nilai >= 75) {
  console.log("B");
} else if (nilai >= 60) {
  console.log("C");
} else {
  console.log("D");
}

JavaScript mengecek dari atas ke bawah dan berhenti di kondisi pertama yang true. Dengan nilai 75, ia mengecek "75 >= 90?" (salah), lalu "75 >= 75?" (benar), cetak "B", lalu selesai. Sisanya tidak dicek lagi. Urutan itu penting: kalau kamu menaruh nilai >= 60 paling atas, semua nilai di atas 60 akan nyangkut di sana dan tidak pernah mencapai A atau B.

let nilai = 95;
if (nilai >= 60) {
  console.log("Lulus");
} else if (nilai >= 90) {
  console.log("Istimewa");
} else {
  console.log("Coba lagi");
}

Truthy dan Falsy: Si Kembar yang Menjebak

Tadi saya bilang kondisi harus boolean. Itu tidak sepenuhnya benar. JavaScript itu pemaklum: kalau kamu memberinya nilai yang bukan boolean, ia akan memaksakan jadi boolean dengan aturan yang namanya truthy dan falsy.

Aturannya: cuma ada 6 nilai yang dianggap salah (falsy): false, 0, "" (teks kosong), null, undefined, dan NaN. Semua yang lain dianggap benar (truthy). Ya, semua. Termasuk yang kelihatannya "kosong":

if ("0") {
  console.log("jalan");
}
// Output: "jalan"! Teks "0" itu truthy karena bukan teks kosong.

let keranjang = [];
if (keranjang) {
  console.log("Ada isi");
} else {
  console.log("Kosong");
}

Dua Persepsi yang Sering Salah

Pertama: "setiap if harus punya else." Tidak. else itu opsional. Kalau tidak ada yang perlu dilakukan saat kondisi salah, ya tidak usah ditulis. if (hujan) { bawaPayung(); } sudah lengkap. Memaksakan else kosong cuma menambah sampah bacaan.

Kedua: "perulangan itu cuma buat menghitung angka 1 sampai 10." Itu cuma contoh di buku. Di dunia nyata, perulangan dipakai untuk memproses daftar: daftar produk di keranjang, daftar pesan chat, daftar file di folder. Angkanya cuma alat bantu untuk menunjuk "sekarang giliran item ke berapa". Begitu kamu paham ini, perulangan berubah dari latihan membosankan jadi alat yang powerful.

Perulangan: Mesin Fotokopi yang Rajin

Kalau if itu lampu lalu lintas, perulangan (loop) itu mesin fotokopi: kamu setel "fotokopi 10 lembar", ia mengulang pekerjaan yang sama 10 kali tanpa protes. Ada tiga jenis loop yang wajib kamu kenal.

1. for: kalau kamu tahu mau mengulang berapa kali.

for (let i = 0; i < 5; i++) {
  console.log("Halo ke-" + i);
}

Tiga bagian di dalam kurung, dipisah titik koma: mulai (let i = 0, siapkan penghitung), syarat lanjut (i < 5, selama ini true, ulangi terus), langkah (i++, tiap selesai satu putaran, tambah penghitung 1). i++ itu singkatan dari i = i + 1.

2. while: kalau kamu tidak tahu berapa kali, tapi tahu kapan berhenti.

let baterai = 100;
while (baterai > 20) {
  console.log("Bermain game... baterai: " + baterai);
  baterai = baterai - 10;
}

Analoginya: "selama persediaan bahan masih ada, terus masak". Bahayanya: kalau kamu lupa mengurangi baterai di dalam loop, kondisinya true selamanya dan programmu macet dalam infinite loop. Setiap while wajib punya "jalan keluar".

3. for...of: kalau mau menyentuh setiap item di daftar. Ini yang paling elegan untuk daftar, dan akan jadi favoritmu nanti:

let buah = ["apel", "mangga", "jeruk"];
for (let b of buah) {
  console.log("Saya suka " + b);
}

Bacanya: "untuk setiap b di dalam buah, kerjakan ini". Tidak perlu mengurus penghitung manual. Bersih.

for (let i = 0; i < 10; i = i + 3) {
  console.log("tik");
}

break dan continue: Rem dan Gas di Tengah Jalan

Kadang kamu perlu keluar dari loop sebelum waktunya, atau melewatkan satu putaran. Dua perintah ini fungsinya:

• break: hentikan loop sekarang juga, keluar total. Seperti menemukan barang yang dicari di rak ketiga, tidak perlu cek rak keempat sampai kesepuluh.
• continue: lewati putaran ini saja, lanjut ke putaran berikutnya. Seperti tukang sortir yang membuang apel busuk tapi terus memeriksa apel berikutnya.

for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    continue; // lewati angka 4
  }
  if (i === 8) {
    break; // berhenti total di angka 8
  }
  console.log(i);
}
// Output: 1, 2, 3, 5, 6, 7

Coba jejaki sendiri sebelum percaya outputnya. Kemampuan menjejak kode baris per baris seperti ini jauh lebih berharga daripada menghafal definisi break.

Latihan: Ubah, Jangan Cuma Dibaca

1. Ubah contoh nilai jadi cek kelulusan versi kamu. Ambil contoh if else if nilai di atas, ubah jadi penentu ongkir: di bawah 50 ribu kena ongkir 15 ribu, 50-100 ribu kena 10 ribu, di atas 100 ribu gratis. Perhatikan urutan kondisinya supaya tidak "bocor" seperti contoh jebakan tadi.
2. Bikin loop hitung mundur. Ubah contoh for "Halo ke-" jadi hitung mundur peluncuran roket dari 10 ke 1, lalu cetak "Meluncur!" setelah loop selesai. Petunjuk: langkahnya bukan i++ lagi.
3. Gabungkan if dan loop. Tulis loop 1 sampai 20 yang hanya mencetak angka genap (petunjuk: modulus % dari artikel kemarin + continue). Kalau berhasil, ubah lagi supaya ia berhenti total setelah menemukan 5 angka genap pertama (petunjuk: tambah penghitung + break).

Habis Ini ke Mana?

Sekarang programmu bisa memilih jalan dan mengulang pekerjaan. Masalah berikutnya: kode yang panjang dan berulang-ulang itu susah dibaca dan susah diperbaiki. Bayangkan menulis ulang logika cek ongkir yang sama di lima tempat berbeda, lalu aturan ongkirnya berubah. Kamu harus mengedit lima tempat dan pasti ada yang kelewat.

Solusinya adalah function: cara membungkus sekumpulan kode jadi satu paket bernama yang bisa dipakai ulang. Artikel berikutnya, Function di JavaScript dan Cara Nulis Kode yang Rapi, akan mengajarkanmu berpikir seperti koki profesional yang menyiapkan bumbu dalam wadah-wadah kecil siap pakai, bukan mengulek dari nol setiap kali masak.