Pada video sebelumnya, pada saat kita membicarakan mengenai kata kunci switch, kita telah belajar mengenai kata kunci break yang fungsinya untuk keluar dari switch. Nah, pada video ini, kita akan belajar mengenai fungsi dari kata kunci break apabila kita gunakan di dalam perulangan atau loop.

Sebelumnya kita lihat dahulu ya alur kerja perulangan sebelum menggunakan break. Browser memulai dari statement pertama. Dan kemudian memeriksa nilai dari kondisi. Apabila nilai kondisi benar, maka browser melanjutkan ke statement kedua, dan statement ketiga. Kemudian browser kembali memeriksa kembali nilai dari kondisi. Apabila nilainya masih benar, maka browser kembali mengerjakan statement kedua dan ketiga. Disini terjadi perulangan atau loop, hingga nilai kondisi berubah menjadi salah, barulah browser melanjutkan ke statement keempat.

Selanjutnya, kita menambahkan kata kunci break diantara statement kedua dan ketiga. Akibatnya alur kerja browser di dalam loop menjadi berubah. Awalnya browser mengerjakan statement pertama terlebih dahulu. Kemudian browser memeriksa nilai dari kondisi. Apabila nilainya benar, maka browser mengerjakan statement kedua. Pada saat browser melanjutkan dan bertemu dengan kata kunci break, maka browser langsung keluar dari loop dan melanjutkan ke statement keempat. Jadi walaupun kondisi bernilai true, statement ketiga tidak pernah dijalankan sama sekali, dan browser tidak kembali memeriksa kondisi sehingga tidak ada perulangan. Mari kita coba praktekkan.

Oke, kita masuk ke praktek coding. Saya sudah membuatkan script sederhana untuk video ini. Bisa dilihat di layar.

console.log("Awal kode");
for(let i = 0; i < 3; i++)
{
  console.log("Awal perulangan " + i);
  console.log("Akhir perulangan " + i);
};
console.log("Akhir kode");

Pertama kita meminta browser untuk menulis “Awal kode” di console. Kemudian kita melakukan perulangan sebanyak 3 kali. Di setiap perulangan kita meminta browser untuk menuliskan awal perulangan ke-i dan akhir perulangan ke-i. Keluar dari loop, kita meminta browser untuk menulis “Akhir kode”.

Kalau kita jalankan kode ini di browser. Kemudian kita lihat di bagian console, maka kita mendapatkan

Awal kode
Awal perulangan 0
Akhir perulangan 0
Awal perulangan 1
Akhir perulangan 1
Awal perulangan 2
Akhir perulangan 2
Akhir kode

Sekarang kita kembali ke kode. Dan kita tambahkan kata kunci break di dalam perulangan, tepatnya diantara kedua kode ini. Kita simpan dan lihat hasilnya di browser.

Awal kode
Awal perulangan 0
Akhir kode

Hasilnya jauh lebih sedikit daripada sebelumnya ya. Karena begitu browser menemukan kata kunci break, browser langsung keluar dari loop dan melanjutkan ke kode setelah loop.

Untuk lebih mengerti, ada baiknya kita coba debug menggunakan Chrome Developer Tools. Kita buka bagian Sources. Kita pilih tab Page. Lalu kita pilih file perulangan.js. Nah, kode Javascript kita muncul di browser. Kita buat breakpoint di baris pertama. Lalu kita tekan F5 untuk menjalankan ulang script ini.

Browser berhenti di baris pertama script. Kalau kita tekan tombol Step, maka browser melanjutkan ke baris for bagian inisialisasi. Pada console muncul tulisan “Awal kode”. Kita step lagi ya. Nilai awal i adalah 0. Apakah 0 kecil dari 3? Benar, maka kita lanjut ke dalam loop. Maka browser menuliskan Awal perulangan 0.

Selanjutnya ketemu kata kunci break. Dan browser langsung loncat ke kode setelah looping, dan menuliskan “Akhir kode”. Jadi begini ya cara kerja dari break apabila kita gunakan di dalam loop.

Selain break, ada satu kata kunci lagi yang bisa kita gunakan di dalam loop, yaitu “continue”. Di layar bisa kita lihat alur kerja script yang menggunakan kata kunci continue.

Pertama browser menjalankan statement pertama terlebih dahulu. Kemudian browser memeriksa nilai dari kondisi. Apabila nilai kondisi benar, maka browser menjalankan statement kedua. Setelah itu browser bertemu dengan kata kunci continue, maka browser langsung kembali memeriksa kondisi loop. Apabila kondisi masih benar, maka browser mengulangi statement kedua, continue dan kembali ke kondisi. Begitu seterusnya hingga kondisi berubah menjadi false, barulah browser keluar dari loop dan melanjutkan ke statement keempat.

Perhatikan disini bahwa statement ketiga tidak pernah dijalankan. Dan perhatikan juga bahwa dengan menggunakan kata kunci continue, kita tetap menjalankan looping sebanyak yang telah kita atur. Jadi ini adalah perbedaan mendasar antara continue dengan break ya. Kalau kita menggunakan continue, kita tetap melakukan perulangan. Sedangkan kalau kita menggunakan break, maka kita langsung keluar dari perulangan.

Kita coba praktek. Kita buka kembali source code kita, dan kita ganti kata kunci break menjadi continue. Kita simpan. Dan kemudian kita hapus dahulu breakpoint sebelumnya. Lalu kita jalankan script di browser. Maka hasilnya adalah:

Awal kode
Awal perulangan 0
Awal perulangan 1
Awal perulangan 2
Akhir kode

Perhatikan bahwa kode untuk menuliskan “Akhir perulangan” tidak dijalankan ya. Untuk lebih mengerti mengenai alur kerja script, ada baiknya kita debug lagi source code kita. Kita set ulang breakpoint di baris pertama dan kita refresh.

Mulai dari baris pertama ya. Kalau kita jalankan. Browser menulis “Awal kode” lalu pindah ke baris kedua bagian inisialisasi. Nilai i diubah menjadi 0. Lalu browser memeriksa kondisi apakah i < 3. Benar. Maka browser masuk ke dalam loop. Browser menulis “Awal perulangan 0”. Browser bertemu continue. Maka browser langsung kembali ke baris kedua, bagian increment.

Nilai i diubah menjadi 1 dan browser memeriksa kondisi apakah i < 3. Benar, maka kembali ke loop. Browser menulisa “Awal perulangan 1”. Ketemu continue. Maka browser kembali ke baris kedua, bagian increment.

Sekarang nilai i berubah menjadi 2. Berhubung masih memenuhi kondisi, maka browser kembali ke loop. Menulis “Awal perulangan 2”. Ketemu continue lagi dan kembali ke increment.

Sekarang nilai i adalah 3 dan tidak memenuhi kondisi. Maka browser keluar dari loop dan menulis “Akhir kode”.

Oke ya. Jadi teman-teman sudah melihat bagaimana alur kerja script dengan menggunakan kata kunci continue.

Satu hal yang perlu diperhatikan apabila teman-teman melakukan looping dengan menggunakan kata kunci while. Sebagai contoh, kita copy dahulu semua kode kita dan kita paste di bagian bawahnya. Kita komentari semua kode awal kita. Lalu kita modifikasi kode hasil paste menjadi looping menggunakan while.

console.log("Awal kode");
let i = 0;
while(i < 3)
{
  console.log("Awal perulangan " + i);
  continue;
  console.log("Akhir perulangan " + i);
  i++;
};
console.log("Akhir kode");

Perhatikan kembali source code kita. Di dalam loop, browser akan bertemu dengan kata kunci continue. Akibatnya browser langsung kembali ke baris while, dengan nilai i yang tetap sama karena increment berada di bawah continue. Hal seperti ini akan menyebabkan infinite loop. Kalau kita jalankan kode ini di browser, maka browser akan menuliskan “Awal perulangan 0” secara terus-menerus tanpa henti. Satu-satunya cara untuk menghentikannya adalah menutup tap halaman ini.

Solusi dari masalah ini adalah kita harus menjalankan increment terlebih dahulu sebelum menjalankan continue. Jadi kode i++ ini mesti kita pindahkan ke baris sebelum continue. Setelah itu barulah browser dapat berjalan dengan normal seperti pada saat kita menggunakan for.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.