Tabel perkalian punya dua arah: satu baris untuk angka yang dikalikan, satu kolom untuk pengalinya. Mencetaknya berarti mengulang dua hal sekaligus — untuk setiap baris, tulis lima perkalian. Pola dua lapis ini muncul di banyak tempat: baris dan kolom pada tabel, kategori dan item di dalam kategori, atau seluruh kombinasi pasangan dari dua kelompok nilai. JavaScript menyelesaikannya dengan nested loop: sebuah loop yang ditulis di dalam blok loop lain.

Chapter ini menyusun tabel perkalian dari dua loop, menghitung berapa banyak putaran yang sebenarnya terjadi, lalu menyelesaikan masalah yang tidak bisa diselesaikan break biasa: keluar dari kedua loop sekaligus dengan break berlabel, dan melompati satu putaran loop luar dengan continue berlabel.

Loop di Dalam Loop: Bagian Dalam Berputar Penuh per Putaran Luar #

Aturan dasarnya satu kalimat: setiap satu putaran loop luar, loop dalam berjalan utuh dari awal sampai akhir. Bila loop luar berputar tiga kali dan loop dalam berputar lima kali, blok dalam dieksekusi 3 × 5 = 15 kali. Variabel penghitung keduanya punya nama berbeda (baris dan kolom) agar tidak saling menimpa.

Membaca kode bersarang ada triknya: indentasi adalah peta. Setiap level tambahan berarti “di dalam putaran level di atasnya”. Selama indentasi rapi, pembaca bisa menelusuri loop luar dulu untuk memahami kapan putaran dimulai, lalu turun ke loop dalam untuk memahami apa yang diulang. Kebiasaan menjaga indentasi konsisten — dua spasi per level, seperti contoh-contoh di course ini — membuat nested loop tetap terbaca meski bertumpuk.

Perkalian itu berlaku dua arah. Ia menjelaskan cara membaca keluaran — lima baris milik setiap tabel — sekaligus biayanya: putaran dalam berlipat ganda seiring ukuran data. Loop luar 1.000 putaran dengan loop dalam 1.000 putaran berarti satu juta eksekusi blok. Bukan larangan, tetapi pengingat untuk memastikan kedua loop benar-benar diperlukan sebelum kita menumpuknya.

Berkas contoh chapter ini memuat empat eksperimen: tabel perkalian, pencarian pasangan dengan dua break biasa, pencarian pasangan dengan break berlabel, dan continue berlabel:

js tabel-perkalian.js 
// tabel-perkalian.js
// Nested loops: tabel perkalian, pencarian pasangan, serta break dan continue berlabel.

// --- 1. tabel perkalian 1-3: loop di dalam loop ---
for (let baris = 1; baris <= 3; baris++) {
  console.log("Tabel", baris);
  for (let kolom = 1; kolom <= 5; kolom++) {
    console.log("  " + baris + " x " + kolom + " = " + (baris * kolom));
  }
}

// --- 2. kombinasi pasangan dadu: berhenti butuh dua break tanpa label ---
let ditemukan = false;
for (let daduA = 1; daduA <= 6; daduA++) {
  for (let daduB = 1; daduB <= 6; daduB++) {
    if (daduA + daduB === 10) {
      console.log("Cara flag - pasangan pertama jumlah 10:", daduA, "dan", daduB);
      ditemukan = true;
      break; // hanya keluar dari loop dalam
    }
  }
  if (ditemukan) {
    break; // butuh pemeriksaan tambahan untuk keluar dari loop luar
  }
}

// --- 3. break berlabel: keluar dari kedua loop sekaligus ---
cari: for (let daduA = 1; daduA <= 6; daduA++) {
  for (let daduB = 1; daduB <= 6; daduB++) {
    if (daduA + daduB === 10) {
      console.log("Cara label - pasangan pertama jumlah 10:", daduA, "dan", daduB);
      break cari; // langsung keluar dari loop luar yang berlabel
    }
  }
}

// --- 4. continue berlabel: lewati satu putaran loop luar seluruhnya ---
daftar: for (let baris = 1; baris <= 4; baris++) {
  if (baris % 2 === 0) {
    continue daftar; // lompat ke putaran berikutnya dari loop luar
  }
  console.log("Tabel", baris, "diproses");
}

Output yang Dihasilkan:

text 
Tabel 1
  1 x 1 = 1
  1 x 2 = 2
  1 x 3 = 3
  1 x 4 = 4
  1 x 5 = 5
Tabel 2
  2 x 1 = 2
  2 x 2 = 4
  2 x 3 = 6
  2 x 4 = 8
  2 x 5 = 10
Tabel 3
  3 x 1 = 3
  3 x 2 = 6
  3 x 3 = 9
  3 x 4 = 12
  3 x 5 = 15
Cara flag - pasangan pertama jumlah 10: 4 dan 6
Cara label - pasangan pertama jumlah 10: 4 dan 6
Tabel 1 diproses
Tabel 3 diproses

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

  1. Baris 5–10 (loop baris dan loop kolom): loop luar berputar untuk baris 1 sampai 3. Setiap putaran luar mencetak judul Tabel N, lalu loop dalam berjalan utuh lima kali mencetak baris x kolom = hasil. Putaran Tabel 2 baru dimulai setelah lima baris milik Tabel 1 selesai — urutan keluaran membuktikan urutan ini.
  2. Baris 8 (console.log(" " + baris + ... + (baris * kolom))): tanda kurung di sekeliling baris * kolom wajib; tanpanya + akan menggabungkan angka sebagai teks, misalnya 1 x 2 = 12.
  3. Baris 13–25 (eksperimen 2): dua loop memeriksa seluruh pasangan dadu 1-1 sampai 6-6. Pasangan pertama yang jumlahnya 10 adalah 4 + 6. Karena break biasa hanya menghentikan loop dalam, kita butuh variabel penanda ditemukan dan pemeriksaan if (ditemukan) break; di loop luar — dua langkah untuk satu tujuan.
  4. Baris 28–35 (eksperimen 3): label cari: ditempel pada loop luar. break cari; menghentikan loop berlabel itu secara langsung — kedua loop berhenti sekaligus tanpa variabel penanda. Hasilnya sama persis: 4 dan 6.
  5. Baris 38–43 (eksperimen 4): label daftar: pada loop luar. Saat baris genap, continue daftar; melompat langsung ke putaran berikutnya dari loop luar — seluruh isi putaran itu dilewati. Karena itu hanya Tabel 1 dan Tabel 3 yang diproses.

break Berlabel: Satu Nama untuk Dua Loop #

Sintaksnya terdiri atas dua bagian: nama label diikuti titik dua ditulis tepat di depan statement loop, lalu break memakai nama itu. Nama label bebas — cari, daftar, barisLuar — asalkan sama persis dengan yang dideklarasikan. Tanpa nama, break selalu merujuk loop terdalam tempat ia berada.

Cara membacanya juga alami: cari: for (...) berarti “inilah loop pencarian”, dan break cari; berarti “hentikan pencariannya”. Niat berhenti total yang sebelumnya butuh variabel penanda dan pemeriksaan tambahan kini tertulis dalam satu statement.

Eksperimen 2 dan 3 menghasilkan keluaran yang sama, tetapi versi label menghilangkan variabel ditemukan dan satu if tambahan. Untuk pencarian yang berhenti di pasangan pertama, break berlabel menyatakan niat itu dalam satu baris.

continue Berlabel: Melewati Satu Putaran Luar #

continue biasa hanya melompati sisa putaran loop dalam; satu putaran loop luar tetap mengeksekusi sisa isinya. Dengan label, continue daftar; melompat ke putaran berikutnya dari loop luar — engine melompat ke bagian update loop yang berlabel (baris++), memeriksa kondisinya, lalu menjalankan blok luar dari awal. Itulah sebabnya seluruh putaran baris = 2 dan baris = 4 terlewati begitu saja, sehingga keluaran hanya menampung Tabel 1 dan Tabel 3.

Data Dua Dimensi: Baris dan Kolom #

Pola baris–kolom pada tabel perkalian berlaku persis untuk data dua dimensi: array yang isinya array lagi. Loop luar menjelajah baris, loop dalam menjelajah isi setiap baris:

js 
const papan = [
  ["X", "O"],
  ["O", "X"],
];
for (let b = 0; b < papan.length; b++) {
  for (let k = 0; k < papan[b].length; k++) {
    console.log("baris", b, "kolom", k, ":", papan[b][k]);
  }
}

Output yang Dihasilkan:

text 
baris 0 kolom 0 : X
baris 0 kolom 1 : O
baris 1 kolom 0 : O
baris 1 kolom 1 : X

Perhatikan bagian yang berbeda dari contoh tabel: batas loop dalam tidak lagi angka tetap, melainkan papan[b].length — panjang baris yang sedang dijelajahi. Dengan begitu baris-baris boleh punya panjang berbeda, dan papan[b][k] membaca kolom k dari baris b. Penamaan penghitungnya pun disesuaikan: b untuk baris dan k untuk kolom, singkat tetapi tetap menjelaskan perannya — kebalikan dari tabel perkalian yang memakai nama panjang baris dan kolom karena keduanya sama-sama punya makna eksplisit di keluaran. Struktur semacam ini nanti sering muncul di section Arrays; yang perlu dibawa dari sini adalah pola loop-nya.

Sampai di sini, seluruh alat control flow sudah kita pegang: keputusan dengan if-else dan switch, pengulangan dengan for, while, dan do-while, kendali putaran dengan break dan continue, lalu penyusunan loop bersarang. Chapter penutup section ini merangkum cara memilih dan merapikan semuanya agar kode tetap mudah dibaca saat logika bertambah.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

tabel-perkalian.js

Unduh berkas
javascript 
// tabel-perkalian.js
// Nested loops: tabel perkalian, pencarian pasangan, serta break dan continue berlabel.

// --- 1. tabel perkalian 1-3: loop di dalam loop ---
for (let baris = 1; baris <= 3; baris++) {
  console.log("Tabel", baris);
  for (let kolom = 1; kolom <= 5; kolom++) {
    console.log("  " + baris + " x " + kolom + " = " + (baris * kolom));
  }
}

// --- 2. kombinasi pasangan dadu: berhenti butuh dua break tanpa label ---
let ditemukan = false;
for (let daduA = 1; daduA <= 6; daduA++) {
  for (let daduB = 1; daduB <= 6; daduB++) {
    if (daduA + daduB === 10) {
      console.log("Cara flag - pasangan pertama jumlah 10:", daduA, "dan", daduB);
      ditemukan = true;
      break; // hanya keluar dari loop dalam
    }
  }
  if (ditemukan) {
    break; // butuh pemeriksaan tambahan untuk keluar dari loop luar
  }
}

// --- 3. break berlabel: keluar dari kedua loop sekaligus ---
cari: for (let daduA = 1; daduA <= 6; daduA++) {
  for (let daduB = 1; daduB <= 6; daduB++) {
    if (daduA + daduB === 10) {
      console.log("Cara label - pasangan pertama jumlah 10:", daduA, "dan", daduB);
      break cari; // langsung keluar dari loop luar yang berlabel
    }
  }
}

// --- 4. continue berlabel: lewati satu putaran loop luar seluruhnya ---
daftar: for (let baris = 1; baris <= 4; baris++) {
  if (baris % 2 === 0) {
    continue daftar; // lompat ke putaran berikutnya dari loop luar
  }
  console.log("Tabel", baris, "diproses");
}