Control Flow dalam JavaScript: Keputusan & Perulangan

| JavaScript | javascript, tutorial, control-flow

Control Flow dalam JavaScript: Keputusan & Perulangan

Halo, selamat datang lagi di seri belajar JavaScript! Setelah di artikel sebelumnya kita sudah paham soal operator dan ekspresi, sekarang waktunya kita bahas sesuatu yang sangat fundamental dalam pemrograman: control flow atau kontrol alur.

Kontrol alur adalah cara kita “memberitahu” komputer untuk membuat keputusan dan mengulang sesuatu. Tanpa ini, program kita cuma bisa menjalankan baris kode secara berurutan dari atas ke bawah — bosan banget kan?

Yuk, kita mulai!

Kondisi: if, else if, else

Pernah nggak kamu mikir, “Kalau hujan, bawa payung. Kalau nggak, bawa kacamata.”? Itulah yang dilakukan if-else dalam JavaScript. Kita kasih kondisi, dan program memilih jalur mana yang dijalankan.

const hujan = true;

if (hujan) {
  console.log("Bawa payung ya!");
} else {
  console.log("Kacamata saja deh.");
}

Kalau kondisinya lebih dari satu, pakai else if:

const skor = 85;

if (skor >= 90) {
  console.log("Sangat bagus!");
} else if (skor >= 75) {
  console.log("Bagus, pertahankan!");
} else if (skor >= 50) {
  console.log("Masih bisa diperbaiki.");
} else {
  console.log("Yuk semangat belajar lagi!");
}
// Output: "Bagus, pertahankan!"

Kamu juga bisa menulis kondisi dalam satu baris (ternary operator), cocok untuk kondisi simpel:

const usia = 20;
const status = usia >= 18 ? "Dewasa" : "Anak-anak";
console.log(status); // "Dewasa"

Tapi jangan terlalu sering pakai ternary kalau kondisinya kompleks — nanti malah bikin kode susah dibaca.

Switch Statement

Kalau kamu punya banyak kondisi yang harus dicek terhadap satu nilai, switch bisa jadi pilihan yang lebih rapi dibanding bertumpuk if-else.

const hari = "Senin";

switch (hari) {
  case "Senin":
    console.log("Hari pertama kerja!");
    break;
  case "Selasa":
    console.log("Masih semangat!");
    break;
  case "Rabu":
    console.log("Midweek sudah.");
    break;
  case "Jumat":
    console.log("Hore, hari Jumat!");
    break;
  default:
    console.log("Hari biasa aja.");
}
// Output: "Hari pertama kerja!"

Yang perlu diperhatikan:

  • break sangat penting! Tanpa break, eksekusi akan “jatuh” ke case berikutnya (fall-through). Kadang ini disengaja, tapi biasanya ini bug.
  • default opsional — berfungsi sebagai “else” kalau nggak ada case yang cocok.
// Fall-through yang disengaja
const bulan = 3;
switch (bulan) {
  case 1: case 2: case 3:
    console.log("Kuartal 1");
    break;
  case 4: case 5: case 6:
    console.log("Kuartal 2");
    break;
}
// Output: "Kuartal 1"

Case-nya dikumpulkan jadi satu karena nggak ada break di antara mereka. Ini trik yang berguna, tapi gunakan dengan bijak supaya kodenya tetap jelas.

Perulangan: for Loop

for loop adalah senjata paling klasik untuk mengulang sesuatu. Bentuk dasarnya:

for (let i = 0; i < 5; i++) {
  console.log(`Iterasi ke-${i}`);
}
// Output:
// Iterasi ke-0
// Iterasi ke-1
// Iterasi ke-2
// Iterasi ke-3
// Iterasi ke-4

Mari kita bedah bagian for (let i = 0; i < 5; i++):

  1. let i = 0 — inisialisasi, dijalankan sekali di awal.
  2. i < 5 — kondisi, dicek setiap iterasi. Kalau true, loop jalan.
  3. i++ — update, dijalankan setelah setiap iterasi.

for loop sangat fleksibel. Mau menghitung mundur? Bisa aja:

for (let i = 10; i >= 0; i--) {
  console.log(i);
}
// 10, 9, 8, ..., 1, 0

Mau pakai step 2? Tinggal i += 2:

for (let i = 0; i <= 10; i += 2) {
  console.log(i);
}
// 0, 2, 4, 6, 8, 10

Perulangan: while Loop

while loop lebih sederhana — dia cuma cek kondisi di awal setiap iterasi:

let hitung = 0;

while (hitung < 5) {
  console.log(hitung);
  hitung++;
}
// 0, 1, 2, 3, 4

while cocok digunakan kalau kamu nggak tahu pasti berapa kali loop harus jalan. Misalnya, membaca data dari pengguna sampai dia mengetik “quit”:

// Pseudocode — nggak bisa jalan di browser
let input = "";

while (input !== "quit") {
  input = prompt("Ketik sesuatu (atau 'quit' untuk keluar):");
  console.log(`Kamu mengetik: ${input}`);
}

Peringatan penting: pastikan ada kondisi yang pada akhirnya menjadi false. Kalau nggak, kamu bikin infinite loop yang bakal bikin browser freeze. Nggak enak, percaya deh.

do-while Loop

Bedanya sama while? do-while selalu menjalankan kode minimal sekali sebelum mengecek kondisi:

let angka = 10;

do {
  console.log(angka);
  angka--;
} while (angka > 0);
// 10, 9, 8, ..., 1

Bayangkan kamu mau memvalidasi input pengguna. do-while cocok banget:

// Pseudocode
let jawaban;

do {
  jawaban = prompt("Masukkan angka antara 1-10:");
} while (jawaban < 1 || jawaban > 10);

console.log(`Angka yang benar: ${jawaban}`);

Ini memastikan prompt muncul setidaknya satu kali, meskipun dari awal jawabannya sudah valid.

for…of: Iterasi yang Elegan

JavaScript modern punya for...of yang dirancang untuk iterasi data yang bisa di-iterate (iterable) seperti array, string, Map, Set, dll.

const buah = ["apel", "mangga", "jeruk"];

for (const item of buah) {
  console.log(item);
}
// apel
// mangga
// jeruk

Bandingkan dengan for biasa:

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

for...of jauh lebih bersih dan mudah dibaca, apalagi untuk array. Nggak perlu lagi urusan indeks manual.

Kalau butuh indeksnya juga, pakai entries():

for (const [indeks, buah] of buah.entries()) {
  console.log(`${indeks}: ${buah}`);
}
// 0: apel
// 1: mangga
// 2: jeruk

break dan continue

Dua kata kunci yang sering dipakai di dalam loop:

break

Keluar dari loop sepenuhnya saat kondisi tertentu terpenuhi:

for (let i = 0; i < 100; i++) {
  if (i === 5) {
    console.log("Ketemu 5, berhenti!");
    break;
  }
  console.log(i);
}
// 0, 1, 2, 3, 4, "Ketemu 5, berhenti!"

continue

Skip sisa kode di iterasi saat ini, langsung ke iterasi berikutnya:

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // skip angka genap
  }
  console.log(i);
}
// 1, 3, 5, 7, 9

continue sangat berguna untuk memfilter sesuatu di tengah loop tanpa harus membungkus semua logic di if yang tebal.

Tips dan Best Practice

  1. Hindari var di loop. Pakai let supaya scope-nya terbatas di dalam loop. var punya hoisting yang bisa bikin bug subtle.
// Jangan lakukan ini
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (semua = 3 karena var di-hoist)

// Lakukan ini
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2
  1. Jangan lupa break di switch. Ini kesalahan paling umum yang pernah saya lihat di kode junior developer.

  2. Pilih struktur yang tepat. Iterasi array? for...of atau .forEach(). Iterasi object? for...in. Loop dengan kondisi kompleks? while.

  3. Hati-hati infinite loop. Selalu pastikan ada jalur keluar dari while loop kamu.

Ringkasan

Konsep Fungsi Contoh
if/else Keputusan if (kondisi) { }
switch Multiple kondisi switch (nilai) { case ... }
for Ulangi N kali for (let i=0; i<5; i++)
while Ulangi selama true while (kondisi) { }
do-while Ulangi minimal sekali do { } while (kondisi)
for...of Iterasi collection for (let item of array)
break Hentikan loop break
continue Skip iterasi continue

Kesimpulan

Control flow adalah fondasi dari setiap program. Dengan menguasai if-else, switch, for, while, do-while, for...of, break, dan continue, Anda sudah punya alat yang cukup untuk membuat program yang cerdas.

Di artikel selanjutnya, kita akan masuk ke Functions — cara mengorganisasi dan mendaur ulang kode.


Mail Facebook Twitter Whatsapp