🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

05

Persimpangan Jalan: Control Flow

📖 15 menit baca 🏷️ Fundamental Logika

Secara bawaan, mesin (browser) membaca kodemu dari atas ke bawah, baris demi baris layaknya membaca buku. Namun, skenario di dunia nyata tidaklah berjalan lurus begitu saja.

Bagaimana jika pengguna menekan tombol "Beli" tapi saldonya tidak cukup? Aplikasi harus pandai membelot ke jalan/blok kode yang lain (menampilkan pesan error). Kemampuan untuk mengarahkan alur berjalannya kode berdasarkan suatu kondisi Inilah yang disebut dengan Control Flow (Kendali Alur).

🚦 1. Pintu Kesaktian Utama (if / else)

Blok `if` adalah bentuk validasi paling mendasar di alam semesta bahasa pemrograman. Ia mengecek sebuah kondisi (yang mengalir turun di bab lalu), dan hanya mengeksekusi blok kode di dalam tanda `{ }` jika kondisi di dalam kurung bernilai Benar (`true`).

Sintaks Berlapis

if (kondisi_1) { // Lakukan A jika kondisi 1 benar } else if (kondisi_2) { // Lakukan B jika kondisi utama salah, // tapi kondisi 2 ini malah benar } else { // Lapis terakhir! Lakukan C jika // SEMUA syarat di atas gatot (false). }

Contoh di Toko Online

const saldo = 50000; const hargaBarang = 30000; if (saldo >= hargaBarang) { console.log("Pembelian Berhasil!"); } else { console.log("Saldo Anda Kurang."); }

⚡ 2. Jalan Pintas: Operator Ternary

Menggunakan `if` dan `else` standar memakan 5 hingga 6 baris kode. Bagaimana jika kamu cuma ingin mengecek syarat sederhana untuk masuk ke dalam satu Baris saja? Kenalkan teknik sihir kasta tinggi: Ternary Operator (`? :`). Sangat dicintai oleh anak React!

Formula Pemecah Kode:

Syarat ? "Jika True" : "Jika False"
Zaman Dahulu (Kode Boros)
let statusAkun; if (umur >= 18) { statusAkun = "Dewasa"; } else { statusAkun = "Anak-anak"; }
Best Practice
Industri Modern (Satu Baris)
const statusAkun = (umur >= 18) ? "Dewasa" : "Anak-anak";

🎫 3. Kereta Banyak Gerbong: Switch Case

Terkadang kamu tidak membandingkan `<` atau `>`. Kamu mengecek kepastian nama label (banyak sekali pilihan kesamaan `===`). Menulis `else if` hingga puluhan baris untuk mencocokkan Nama Bulan atau Hari akan membuat kodemu merusak mata. Pada kondisi ini, gunakan struktur `switch`.

const lampuLaluLintas = "Kuning"; switch (lampuLaluLintas) { case "Merah": console.log("Berhenti bung!"); break; <-- Rem dadakan wajib ada! case "Kuning": console.log("Hati-hati!"); break; case "Hijau": console.log("Gas Pol Trobos!"); break; default: console.log("Error: Warna alien terdeteksi!"); // Sama dengan 'else' }
🚨 Awas Lupa Nge-Rem (`break`): Jika kamu lupa menaruh perintah break; di akhir penutup case, eksekusi Switch akan "bocor ke bawah" mengeksekusi semua gerbong gerbong di bawahnya walaupun syaratnya tidak cocok!