Belajar JavaScript (Part9): Loop JavaScript (For Loop, For In Loop, While Loop dan Do While Loop JavaScript)


loop javascript

SeniKoding.com - Loop JavaScript adalah kumpulan kode perintah yang dieksekusi berulang-ulang sesuai dengan kondisi tertentu. Ada beberapa jenis looping didalam JavaScript: For loop, While loop dan Do While loop. Sekarang mari kita pelajari satu-persatu.

Belajar JavaScript, For Loop JavaScript


Loop For jenis ini ditandai dengan batas yang jelas antara dari mana sampai mana looping itu akan dijalankan. Pada kasus pengolahan Array, loop jenis ini termasuk paling praktis untuk digunakan.

Struktur kodenya:
for (statement 1; statement 2; statement 3) {
   .. baris kode aksi ..
}
Misalnya saja kita punya sebuah array bernama "arrKota" yang berisi nama singkatan kota di Indonesia. Jika tidak menggunakan jenis For loop ini maka bisa dituliskan dengan kode script seperti dibawah ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar JavaScript</title>
    </head>
    <body>
        <h2>Belajar Loop JavaScript</h2>
        <script type="text/javascript">
            var arrKota = new Array("JKT", "BDG", "SBY", "MDN");
            document.write(arrKota[0] + "<br>");
            document.write(arrKota[1] + "<br>");
            document.write(arrKota[2] + "<br>");
            document.write(arrKota[3] + "<br>");
        </script>
    </body>
</html>

Tetapi tentunya akan lebih mudah dan cepat jika kita menuliskannya dengan kode For loop berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar JavaScript</title>
    </head>
    <body>
        <h2>Belajar Loop JavaScript</h2>
        <script type="text/javascript">
            var arrKota = new Array("JKT", "BDG", "SBY", "MDN");
            for (var i=0;  i<=3;  i++) {
                document.write(arrKota[i] + "<br>");
            }
        </script>
    </body>
</html>

Hasil browser sama dengan kode pertama, tapi untuk kecepatan akan direkomendasikan kode yang kedua:

belajar javascript
Penjelasan:
- Statement 1 yaitu var i = 0; bahwa ditetapkan variabel i dari angka 0, yaitu array pertama.
- Statement 2 yaitu var i <= 3; bahwa variabel i nilai arraynya dari 0 - 3. Dan loop akan berhenti.
Pada statement ini nilai var i <=3 masih merujuk ke statis, jika kita mau lebih dinamis, var i<=3 bisa diganti menggunakan cara ini i < arrKota.length; (length adalah menghitung jumlah array).
- Statement 3 yaitu var i++; ini adalah operator javascript loop tambah 1.

Belajar JavaScript, For In Loop JavaScript


Loop For In jenis ini digunakan untuk menelusuri Property dari sebuah Objek.
Langsung saja saya contohkan kodenya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar JavaScript</title>
    </head>
    <body>
        <h2>Belajar Loop JavaScript</h2>
        <script type="text/javascript">
            var objMobil = {nama:"Suzuki Escudo", warna:" Hijau"};
            for (var i in objMobil) {
                document.write(objMobil[i]);
            }
        </script>
    </body>
</html>

Penampakannya:

belajar javascript

Dengan cara ini, deklarasi objMobil menggunakan kurung kurawal, bukan kurung biasa.

Belajar JavaScript, While Loop JavaScript


Loop While ini akan berjalan sepanjang kondisi tertentu terpenuhi. Jangan lupa untuk memberikan batas pemberentian looping, karena jika tidak siap-siap browser kalian akan crash.
Struktur sintaknya:
while (kondisi) {
  .. aksi yang akan dilakukan ..
}
Contoh penggunaan While Loop:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar JavaScript</title>
    </head>
    <body>
        <h2>Belajar Loop JavaScript</h2>
        <script type="text/javascript">
            var i = 1;
            while (i<100) {
                document.write("Belajar menghitung :" + i +"<br>");
                i++;
            }
        </script>
    </body>
</html>

Hasil browser:

belajar javascript

Loop ini akan menggandakan sampai batas akhir yaitu 99 kali, karena nilai variabel "i < 100".

Belajar JavaScript, Do While Loop JavaScript


Do While Loop ini, mirip dengan While loop, perbedaannya hanya pengecekan datanya dilakukan di akhir dari looping. Jadi prinsipnya, jalankan dulu baru periksa. Itu artinya loop ini minimal akan dilakukan sekali.
Struktur sintaknya:
do {
  .. aksi yang akan dilakukan ..
}
while (kondisi)
Contoh penggunaan kodenya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar JavaScript</title>
    </head>
    <body>
        <h2>Belajar Do While Loop JavaScript</h2>
        <script type="text/javascript">
            var i = 1;
            do {
                document.write("Belajar menghitung :" + i +"<br>");
                i++;
            }
            while (i<100)
        </script>
    </body>
</html>

Penulisan struktur kode dengan While loop hanya dibalik saja, pada while(kondisi) dipindah ke akhir, dan di awal kode diberi awalan "do".

Hasil browser sama dengan perulangan While loop, hanya penempatan kodenya saja yang sedikit berbeda.
Untuk saya pribadi lebih suka menggunakan perulangan While Loop nya. Mungin karena lebih gampang diingat kalau "kondisi" diletakkan diawal.

Sampai disini Tutorial Belajar JavaScript (Part9): Loop JavaScript (For Loop, For In Loop, While Loop, Do While Loop JavaScript), semoga bermanfaat.

- Salam -



Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Belajar JavaScript (Part9): Loop JavaScript (For Loop, For In Loop, While Loop dan Do While Loop JavaScript)"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -