Belajar Javascript Dasar 2

Perulangan Dengan Do While dan For

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Sebelumnya kita telah belajar mengenai cara membuat perulangan dengan menggunakan While. Pada video ini kita akan belajar mengenai cara membuat perulangan dengan menggunakan kata kunci lainnya, yaitu Do While dan For. Kita mulai dari Do While terlebih dahulu.

Diagram cara kerja Do While dapat kita lihat di layar. Pertama browser mengerjakan statement pertama terlebih dahulu. Kemudian dilanjutkan ke statement kedua. Lalu browser memeriksa nilai dari kondisi. Apabila nilainya benar, maka browser kembali mengerjakan statement kedua. Setelah itu browser memeriksa kondisi lagi. Apabila masih benar, maka browser kembali lagi ke statement kedua, dan begitulah berulang-ulang hingga kondisi berubah menjadi false. Setelah kondisi false, barulah browser melanjutkan ke statement berikutnya. Ayo kita coba prakteknya.

Kita buka lagi file dari latihan terakhir. Disini kita melakukan perulangan untuk menuliskan Hello World sebanyak 5 kali. Kita ulangi sebentar ya. Untuk menuliskan suatu kode perulangan, kita perlu menuliskan 4 bagian penting, yaitu inisialisasi, kondisi, aksi dan increment. Sekarang kita akan menuliskan kode dengan tujuan yang sama, namun kali ini kita menggunakan kata kunci do while.

Kita beri judul dahulu CARA DO WHILE. Do While tetap terdiri dari 4 bagian, sama seperti While. Jadi kita mulai dahulu dari inisialisasi. Pertama kita buat dahulu variable iterator dengan nama i, dan kita beri nilai awal 0.

let i = 0;

Kemudian kita masuk ke bagian 2, yaitu kondisi. Perhatikan bahwa dengan menggunakan Do While, maka posisi kondisi akan berpindah menjadi bagian di paling bawah. Kita tulis kodenya

do {
} while(i < 5);

Selanjutnya kita masukkan aksi di dalam kurung kurawal. Aksi kita adalah menuliskan Hello World diikuti oleh nomor urutnya.

console.log("Hello World!" + (i+1));

Dan langkah terakhir, kita berikan increment i++. Pertama kita ubah dahulu source code bagian atas menjadi komentar. Lalu kita simpan dan jalankan di browser. Hasilnya tetap sama persis dengan latihan kita sebelumnya.

Nah, tentunya ini menjadi pertanyaan bagi teman-teman. Kalau begitu, apa bedanya menggunakan WHILE dengan DO WHILE? Kita komentari sementara kode DO WHILE dan kita kembali ke WHILE. Perhatikan bahwa saya ubah kondisinya menjadi false. Kita simpan dan refresh browser. Maka tidak ada tulisan apa-apa.

Kita kembalikan kode WHILE. Sekarang kita komentari kembali WHILE dan kita kembali ke DO WHILE. Kita lakukan perubahan yang sama. Kondisi kita ubah menjadi false. Perhatikan hasilnya di browser. Kita mendapatkan satu buah Hello World.

Kenapa hal ini bisa terjadi? Kita kembali ke kode kita. Perhatikan lagi kodenya. Aksi dan Increment dijalankan terlebih dahulu. Setelah itu barulah browser memeriksa kondisi. Artinya, dengan menggunakan Do While, maka kode perulangan akan dijalankan oleh browser minimal 1 kali. Sedangkan kalau kita menggunakan While, maka kode perulangan bisa saja tidak dijalankan sama sekali. Inilah perbedaan utama antara While dengan Do While.

Kita masuk ke perulangan dengan menggunakan kata kunci For. For adalah cara perulangan yang paling popular dan nantinya akan paling banyak kita gunakan. Mengapa bisa popular? Sintaks untuk menggunakan for bisa kita lihat di layar ya. For bisa popular karena di dalam for, kita bisa langsung menuliskan bagian inisialisasi, kondisi, dan increment dengan dipisahkan oleh tanda titik koma. Jadinya kita bisa menghemat jumlah baris kode, karena semuanya ditulis dalam satu baris. Dan kita juga terhindar dari kesalahan seperti lupa menuliskan kode increment.

Kita coba praktek ya. Kita tetap menuliskan kode untuk menulis Hello World sebanyak 5 kali. Namun kali ini kita menggunakan for.

Kita beri judul dahulu ya. Cara For. Lalu kita tuliskan kodenya. for, buka kurung. Kita tuliskan inisialisasi let i = 0. Dipisahkan dengan tanda titik koma. Lalu kondisi i < 5. Titik koma lagi. Dan increment i++. Barulah tanda tutup kurung penutup. Setelah itu kita tulis tanda kurung kurawal.

Semua kode yang kita ulangi ditulis di dalam kurung kurawal. Kodenya tetap sama ya.

console.log("Hello World!" + (i+1));

Pertama kita ubah dahulu kode Do While menjadi komentar. Kita simpan dan jalankan di browser. Dan hasilnya tetap sama dengan latihan-latihan kita sebelumnya. Hello World satu hingga lima.

Nah, sekarang pertanyaannya. Apakah for mirip dengan While? Atau for lebih mirip dengan Do While? Teman-teman coba tebak ya. Sekarang kita ubah kondisinya menjadi false. Kita simpan dan lihat hasilnya di browser.

Tidak ada hasil sama sekali ya. Artinya for lebih mirip dengan while. Kondisi diperiksa terlebih dahulu. Dan kalau nilai awal kondisi adalah false, maka kode perulangan tidak dijalankan sama sekali.

Oke, sekarang kita masuk ke bagian terakhir dari video ini. Pada video sebelumnya saya menjelaskan bahwa pada langkah keempat, kita bisa menggunakan kode increment atau decrement. Namun selama ini kita baru menggunakan increment sebagai contoh ya. Kalau kita menggunakan increment, maka nilai awal i adalah 0, dan di setiap perulangan nilai i kita tambahkan dengan satu.

Kita bisa menggunakan logika yang terbalik ya. Jadi nilai awal dari i kita set langsung ke 5. Kemudian untuk kondisi kita ganti menjadi i > 0. Dan di bagian increment kita ubah menjadi decrement i--. Kita simpan dan jalankan di browser.

Nah, sekarang tulisan Hello World tetap diulangi sebanyak 5 kali. Namun nomor urutnya berubah menjadi dari 6 ke 2. Nilainya berkurang di setiap perulangan.

Kalau kita ingin agar nilai akhir dari Hello World menjadi 1, maka kita tinggal menghapus +1 pada kode aksi. Dan sekarang tulisan Hello World menjadi dari 5 ke 1.

Ini adalah contoh dari perulangan dengan menggunakan decrement. Dalam kondisi normal, biasanya kita menggunakan increment. Namun ada kasus tertentu yang memerlukan nilai dari besar ke kecil, dalam hal ini kita akan menggunakan perulangan secara decrement.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.