Perulangan

Apa yang akan kamu lakukan saat disuruh mencetak kalimat berulang-ulang?

Misalnya:

“Tolong tampilkan kalimat “Tutorial Javascript!” di website sebanyak 10 kali”

kamu bisa menuliskannya dengan fungsi document.write()

begini:

    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");
    document.write("<p>Tutorial Javascript!</p>");

kalu disuruh nulis 100.000 kali??

capek dong,masa capek lah

karena itu kita menggunakan perulangan

Secara umum, perulangan ini dibagi dua,yaitu:

counted loop dan uncounted loop.

Perbedaanya:

    Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya.
    Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang.

Perulangan yang termasuk dalam Counted Loop:

    Perulangan For
    Perulangan Foreach
    Perulangan Repeat

Perulangan yang termasuk dalam Uncounted Loop:

    Perulangan While
    Perulangan Do/While

1. Perulangan For di Javascript

Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena sudah jelas berapa kali ia akan mengulang.

for

Bentuknya kodenya seperti ini:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.

Kondisi ini akan menentukan:

    Hitungan akan dimulai dari 0 (i = 0);
    Hitungannya sampai berapa? Sampai i < 10;
    Lalu di setiap perulangan i akan bertambah +1 (i++).

Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan.

Jadi setiap perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita menentukannya di bagian i++.

Ini hasil outputnya:

demo for

Apakah nama variabelnya harus selalu i?

Tidak.

Kita juga bisa menggunakan nama lain.

Misalnya:

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Pada contoh tersebut, kita melakukan perulangan dimulai dari nol 0. Lalu di setiap perulangan nilai variabel couter akan ditambah 2 (counter+=2).

2. Perulangan While di Javascript

Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop.

Perulangan while juga dapat menjadi perulangan yang counted loop dengan memberikan counter di dalamnya.

Untuk memahami perulangan ini…

…mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Bisa disederhanakan menjadi:

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Hasilnya:

demo while

Coba perhatikan blok kode while:

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

Di sana… Perulangan akan terjadi selama variabel ulangi brenilai true.

Lalu kita menggunakan fungsi confirm() untuk menampilkan dialog konfirmasi.

Selama kita memilih Ok pada dialog konfirmasi, maka variabel ulangi akan terus bernilai true.

Tapi kalau kita pilih Cancel, maka variabel ulangi akan bernilai false.

Saat variabel ulangi bernilai false, maka perulangan akan dihentikan.

3. Perulangan Do/While di Javascript

Perulangan do/while sama seperti perulangan while.

Perbedaanya:

Perulangan do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung while.

Bentuknya seperti ini:

do {
    // blok kode yang akan diulang
} while (<kondisi>);

Jadi perbedaanya:

    Perulangan do/while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan while akan mencek kondisi di depan atau awal (sbelum mengulang).

Mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Contoh tersebut sama seperti contoh pada perulangan while.

Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel.

Maka hasilnya:

do-while

4. Perulangan Foreach di Javascript

Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.

Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan dituentukan oleh panjang dari array.

Ada dua cara menggunakan perulangan foreach di Javascript:

    Menggunakan for dengan operator in;
    Mengguunakan method forEach().

Contoh:

Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in:

var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i = 0; i < languages.length; i++){
    document.write(i+". "+ languages[i] + "<br/>");
}

Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator in seperti ini:

var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i in languages){
    document.write(i+". "+ languages[i] + "<br/>");
}

Cara kedua membuat perulangan foreach ialah dengan menggunakan method forEach() dari array.

Contoh:

// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];

// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach(function(day){
    document.write("<p>" + day + "</p>");
});

Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa menggunakan arrow function seperti ini:

// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];

// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach((day) => {
    document.write("<p>" + day + "</p>");
});

5. Perulangan dengan Method repeat()

Perulangan dengen method atau fungsi repeat() termasuk dalam perulangan counted loop.

Fungsi ini khusus digunakan untuk mengulang sebuah teks (string).

Bisa dibilang:

Ini merupakan singkat dari perulangan for.

Contoh:

Apabila kita menggunakan perulangan for:

for( let i = 0; i < 100; i++){
    document.write("Ulangi kalimat ini!");
}

Apabila kita menggunakan fungsi repeat():

document.write("Ulangi kalimat ini! ".repeat(100));

repeat

6. Bonus: Perulangan Bersarang (Nested)

Di dalam blok perulangan, kita juga dapat membuat perulangan.

Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.

Mari kita coba lihat contohnya:

for(let i = 0; i < 10; i++){
    for(let j = 0; j < 10; j++){
        document.write("<p>Perulangan ke " + i + "," + j + "</p>");
    }
}

nested

Pada perulangan tersebut, kita menggunakan dua perulangan for.

Perulangan pertama menggunakan variabel i sebagai counter, sedangkan perultangan kedua menggunakan variabel j sebagai counter.