Pada video ini kita akan mempelajari mengenai cara melakukan perulangan dengan menggunakan kata kunci while. Jadi disini kita akan belajar untuk menyuruh komputer menjalankan satu blok kode kita secara berulang-ulang.

Sebagai contoh, kita bisa melihat ke diagram di layar. Pertama komputer menjalankan statement pertama. Kemudian komputer memeriksa suatu kondisi. Apabila nilai kondisi adalah benar, maka komputer menjalankan statement kedua. Setelah itu komputer kembali memeriksa kondisi tadi, apabila masih benar, maka komputer kembali menjalankan statement kedua, dan seterusnya berulang-ulang hingga kondisi berubah menjadi salah. Setelah kondisinya salah, barulah komputer melanjutkan ke statement ketiga. Jadi disini statement kedua dijalankan secara berulang-ulang. Mari kita lihat prakteknya.

Kita coba praktek di browser. Saya telah membuat dua file sederhana, yaitu index.html dan perulangan.js. Pada file index.html, isinya hanya boilerplate biasa, dan yang paling penting disini adalah tag script yang mengarah ke perulangan.js. Sedangkan pada perulangan.js, isinya hanya satu baris kode yaitu

console.log("Hello World!");

Kita coba jalankan file ini di browser. Kalau kita klik kanan dan Inspect. Lalu kita lihat di consolenya, maka keluar tulisan Hello World.

Sekarang pertanyaannya, bagaimana kalau kita ingin agar tulisan Hello World ini keluar sebanyak 5 kali?

Kita balik ke file perulangan.js. Nah, kalau kita berpikirnya secara manual, maka jawabannya gampang saja ya. Kita copy + paste saja kode Hello World ini sehingga menjadi 5 baris.

Kita simpan dan refresh browser. Nah, sekarang tulisan Hello World-nya keluar sebanyak 5 kali ya. Dan pada bagian kanan kita bisa melihat bahwa tulisan ini berasal dari perulangan.js baris pertama hingga kelima.

Ini adalah cara manual untuk melakukan perulangan. Cara manual seperti ini kurang bagus. Mengapa kurang bagus? Karena ada 3 alasan ya. Alasan pertama adalah kita masih bisa melakukan cara manual seperti ini karena jumlah perulangannya hanya sedikit. Hanya 5 kali. Kalau kita harus melakukan perulangan dalam jumlah besar seperti 100 kali, atau 1.000 kali, atau terkadang kita sendiri juga tidak tau harus mengulangi hingga berapa kali. Untuk kasus seperti ini, cara menuliskan kode manual seperti ini akan menyulitkan kita sendiri.

Alasan kedua, dengan cara copy paste kode seperti ini, maka kita melanggar satu pantangan cara menulis kode yang benar, dan pantangan ini akan sangat berasa efeknya pada saat kita sedang mengerjakan proyek besar. Pantangannya adalah kita tidak boleh menuliskan kode yang sama di beberapa tempat dalam satu proyek. Mengapa tidak boleh? Karena kalau kita hendak mengubah kode tersebut, maka kita harus mengubah semua clone-nya.

Sebagai contoh, rupanya kita mau mengubah tulisan “Hello World!” menjadi “Hello David!”. Maka kita harus mengubah kelima kode ini. Dan kita mesti melakukannya secara manual. Kemudian kalau kita ingin mengembalikannya ke “Hello World!” lagi, maka kita mesti copy paste kembali 5 kali. Atau kalau kebetulan kita masih belum mengubah kode lainnya, maka kita masih bisa menekan undo sebanyak 5 kali.

Alasan ketiga, cara menual akan lebih repot apabila kita hendak melakukan kostumisasi terhadap kode yang berulang. Sebagai contoh, kita mau menambahkan nomor urut di paling belakang string. Maka kita harus mengerjakannya secara menual ya. Kode pertama kita tambahkan satu. Kemudian di kode kedua, kita tambahkan dua. Setelah itu kita tambahkan lagi 3, 4, dan 5.

Sekarang kita coba menuliskan kode dengan menggunakan perulangan while. Cara yang manual ini kita ubah dahulu menjadi komentar. Dan saya beri judul Cara Manual. Dibawahnya, kita beri judul juga Cara While.

Kebetulan di Text Editor Atom ini ada auto-complete yang membantu kita untuk menuliskan sintaks while ya. Jadi kalau saya ketik while, maka disini keluar sintaksnya. While, lalu diikuti dengan tanda kurung, yang didalamnya adalah kondisi. Kemudian diikuti oleh kurung kurawal. Semua kode yang berada di dalam kurung kurawal ini akan diulangi selagi kondisinya bernilai true.

Apa kode yang hendak kita ulangi? Kita ketik di dalam kurung kurawal ya. console.log(“Hello World!”);. Kita simpan dan jalankan di browser. Kalau kita lihat di console, maka browser menuliskan Hello World. Namun perhatikan ada angka di sebelah kiri Hello World, yang menunjukkan berapa kali ditulis di console. Dan angkanya naik terus ya. Artinya browser telah mengulangi menulis Hello World hingga ribuan kali.

Sampai kapan browser menuliskan Hello World!? Tidak ada hentinya ya. Karena pada kode kita tertulis while(true). Artinya kondisi selalu benar selamanya. Kita mesti berhati-hati menuliskan kode seperti ini, karena browser masuk ke ke dalam infinite loop, atau disebut juga dengan nama looping forever. Kalau kita melihat di task manager, maka kita bisa melihat bahwa Chrome sedang menggunakan resource CPU dalam jumlah besar. Komputer kita menjadi lemot. Sedangkan kalau kita lihat pada sebelah kiri judul tab, terdapat lingkaran yang menunjukkan bahwa browser sedang bekerja tanpa henti. Jadi untuk menghentikan infinite loop ini, kita mesti menutup tab pada browser. Barulah penggunaan cpu-nya hilang.

Jadi bagaimana donk cara menuliskan kode perulangan dengan benar? Nah, ada 4 langkah penting yang perlu kita perhatikan di dalam kode perulangan. Yang pertama adalah kita melakukan inisialisasi. Disini kita membuat satu variable yang akan berfungsi sebagai iterator, dan mengatur nilai awalnya. Biasanya nama variable iterator adalah i.

Langkah kedua adalah kita membuat kondisi. Pada kode sebelumnya, kondisi kita adalah true. Ini adalah kondisi yang salah, karena menyebabkan kita masuk ke infinite loop. Kondisi yang benar adalah kita membandingkan nilai dari iterator, sehingga nantinya suatu saat nilai kondisi bisa berubah menjadi false dan kita keluar dari loop.

Langkah ketiga adalah aksi. Aksi ini adalah satu blok kode yang berada di dalam kurung kurawal, yang akan dijalankan secara berulang-ulang. Kita sudah memiliki kodenya ya, yang berfungsi untuk menuliskan kata Hello World. Untuk sementara kode ini tidak perlu diubah.

Dan langkah keempat, ini adalah langkah paling penting dan sering kelupaan karena pada saat menuliskan kode kita terlalu berkonsentrasi pada bagian aksi. Pada langkah keempat ini kita harus membuat kode increment atau decrement pada iterator, sehingga nilainya berubah dan suatu saat akan mengeluarkan kita dari loop.

Sekarang kita praktekkan ya. Langkah pertama kita adalah inisialisasi. Saya tambahkan komentar inisialisasi ya, agar langkah kita menjadi jelas. Langkah pertama ini gampang ya, kita membuat variable iterator i dan mengisinya dengan nilai awal 0.

let i = 0;

Langkah kedua adalah kondisi. Disini kita tentukan hendak mengulangi aksi sebanyak berapa kali? Kalau kita hendak menuliskan sebanyak 5 kali, maka kondisinya adalah selagi nilai i lebih kecil dari 5.

Langkah ketiga adalah aksi. Disini saya hanya menambahkan komentar saja ya. Karena untuk sementara kode aksi kita sudah benar.

Langkah terakhir adalah increment. Ini adalah langkah paling penting, untuk mengeluarkan kita dari loop. Kalau kita sampai lupa menuliskan increment, maka kita akan terperangkap di dalam infinite loop. Kode untuk increment sederhana ya. Kita sudah belajar operator increment. Kita tinggal tulis i++;

Kita simpan dan jalankan di browser. Maka browser menuliskan Hello World sebanyak 5 kali. Namun berhubung kode yang menuliskan Hello World berada di baris yang sama, maka browser hanya menuliskan 1 baris Hello World dengan sebelah kirinya adalah angka 5.

Kita lihat lagi kodenya ya. Di bagian bawah ini adalah kode perulangan dengan menggunakan While. Sedangkan di bagian atas adalah kode perulangan dengan menggunakan cara manual, copy + paste. Sekilas lebih gampang copy paste ya. Namun untuk jangka panjang, menggunakan while akan memberikan kita jauh lebih banyak manfaat.

Misalkan kita hendak mengganti perulangannya sebanyak 100 kali, atau bahkan mau berapa ribu kali. Kita tinggal mengganti angka pada kondisi. Misalkan menjadi 100 dulu ya. Maka browser mengulangi kode ini sebanyak 100 kali. Berbeda dengan cara copy paste dimana kita harus melakukan copy paste sebanyak 100 kali dan menghasilkan 100 baris kode.

Kemudian bila kita hendak mengganti tulisan Hello World menjadi Hello David. Kita tinggal mengganti kode di satu baris aksi ini saja. Berbeda dari cara manual, dimana kita harus mengganti semua kode hasil paste-nya.

Dan kalau kita hendak menambahkan angka setelah Hello World, maka kita tinggal menambahkannya dengan variable i. Kita kembalikan dahulu ya kata-katanya menjadi Hello World dan perulangannya menjadi 5 kali. Kita lihat hasilnya. Berhubung nilai awal i dimulai dari 0, maka browser menampilkan Hello World mulai dari 0 hingga 4.

Untuk mengubah nilai 0 menjadi 1, kita tinggal menambahkan i dengan angka 1. Namun hati-hati, cara menuliskan kodenya jangan langsung +1 seperti ini ya. Karena akan memberikan kita efek yang tidak diinginkan. Cara yang benarnya adalah kita menaruh i + 1 di dalam tanda kurung. Jadi browser akan mengerjakan i + 1 terlebih dahulu, setelah itu barulah hasilnya digabungkan dengan string Hello World.

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.