EL Creative Academy Site of The Month
while Loop dan for Loop pada JavaScript

Sebagai manusia, kita pasti sering mengulangi suatu kegiatan atau aktifitas. Misalnya seperti mengeluarkan atau memindahkan barang dari satu kotak kedalam kotak lain sampai isi dari kotak pertama itu habis. Pada bahasa pemrograman khususnya pada JavaScript, pengulangan tersebut dinamakan dengan Loop.



while Loop pada JavaScript

Berikut adalah contoh penulisan while Loop:

while (kondisi) {
    // kode
    // kode yang ada di bagian ini dinamakan "Loop Body"
}


Sementara jika kondisi nya itu benar (true), maka kode yang ada di Loop Body akan segera di jalankan. Contoh, di bawah ini merupakan hasil Loop dari i sementara jika i < 3:

let i = 0;
while (i < 3) { // menampilkan angka 1, kemudian 2, dan 3
    alert(i);
    i++
}


Kode tunggal yang dijalankan pada Loop Body dinamakan dengan Iteration. Loop pada contoh kode di atas akan menghasilkan tiga Iteration. Jika tidak ada kode i++ pada contoh kode diatas, maka Loop akan selalu mengulanginya.

Bukan hanya perbandingan, semua ekspresi atau variabel dapat menjadi kondisi pada Loop: Kondisi akan di evaluasi terlebih dahulu kemudian diubah menjadi Boolean dengan while.

Contoh, cara singkat untuk menulis while (i != 0) adalah while (i):

let i = 3;
while (i) { // sementara jika i menjadi 0, maka kondisinya akan salah (false), dan Loop akan berhenti
    alert(i);
    i--;
}


Tanda Curly Braces {...} pada Loop

Jika Loop Body hanya memiliki Statement tunggal, kita dapat menghilangkan tanda Curly Braces "{...}". Contoh:

let i = 3;
while (i) alert(i--);


do...while Loop pada JavaScript

Pengecekan kondisi dapat di pindahkan di bawah Loop Body dengan menggunakan do...while:

do {
    // Loop Body
} while (kondisi);


Pertama-tama, Loop akan menjalankan Body, kemudian mengecek kondisi, dan sementara jika kondisinya benar (true), maka Loop akan di jalankan lagi. Berikut adalah contoh penerapannya:

let i = 0;
do {
    alert(i);
    i++;
} while (i < 3);


Penulisan kode seperti diatas hanya dapat digunakan ketika kalian ingin Loop Body agar di jalankan terlebih dahulu tergantung dengan kondisinya.

for Loop pada JavaScript

Penulisan for Loop dapat terlihat lebih kompleks dan paling sering digunakan. Contoh:

for (mulai, kondisi, tahap) {
    // ... Loop Body ...
}


Mari kita lihat penjelasan dari setiap bagiannya. Loop pada contoh berikut akan menjalanakan alert(i) untuk i dari 0 sampai (tidak termasuk) 3:

for (let i = 0; 0 < 3; i++ { // menampilkan angka 0, kemudian 1, dan 3
    alert(i);
}


Sekarang, simaklah penjelasan untuk setiap bagian dari Statement for:
  • mulai - i = 0 : Dijalankan sekali ketika memasuki Loop.
  • kondisi - i < 3 : Mengecek sebelum Iteration pada Loop. Jika salah (false), maka Loop akan berhenti.
  • Body - alert(i) : Menjalankan ulang sementara jika kondisi nya benar (true).
  • tahap - i++ : Dijalankan setelah Body pada setiap Iteration.

Algoritma umum dari Loop dapat terlihat seperti berikut:

Jalankan mulai
> (jika (if) kondisi > jalankan Body dan tahap)
> (jika (if) kondisi > jalankan Body dan tahap)
> (jika (if) kondisi > jalankan Body dan tahap)
> ...


mulai akan di jalankan terlebih dahulu kemudian Iteration: Setelah setiap kondisi sudah diuji, lalu body dan tahap akan di jalankan.

Jika kalian baru mengenal tentang Loop, mungkin akan sedikit sulit untuk kalian pahami. Maka dari itu, sering-seringlah kembali pada artikel ini dan lihatlah contoh diatas.

Jika diterapkan, contoh algoritma diatas dapat terlihat seperti berikut:

// for (let i = 0; i < 3; i++) alert(i)

// Jalankan mulai
let i = 0
// jika (if) kondisi > jalankan Body dan tahap
if (i < 3) { alert(i); i++ }
// jika (if) kondisi > jalankan Body dan tahap
if (i < 3) { alert(i); i++ }
// jika (if) kondisi > jalankan Body dan tahap
if (i < 3) { alert(i); i++ }
// ... berakhir disini, karena i === 3


Deklarasi Inline Variable pada Loop

Disini, variabel "Counter" i dapat di deklarasikan di dalam Loop. Hal ini dinamakan dengan deklarasi Inline Variable. Sama saja seperti Variabel yang hanya ada di dalam Loop:

fot (let i = 0; i < 3; i++) {
    alert(i); // 0, 1, 2
}
alert(i); // error, tidak ada variabel


Untuk mengatasi error pada kode diatas, kita dapat menggunakan contoh seperti berikut:

let i = 0;
for (i = 0; i < 3; i++) { // menggunakan variabel yang sudah ada
    alert(i); // 0, 1, 2
}
alert(i); // 3, terlihat, karena variabel sudah di deklarasikan di luar Loop


Melewati Suatu Bagian pada Loop

Semua bagian pada for Loop dapat dilewati. Contoh, kita dapat menghilangkan mulai jika kita tidak ingin melakukan apapun waktu Loop di jalankan:

let i = 0; // kita sudah mendeklarasikan dan menentukan i

for (; i < 3; i++) { // tidak membutuhkan "mulai"
    alert(i); // 0, 1, 2
}


Kita juga dapat menghilangkan bagian tahap:

let i = 0;

for (; i < 3;) {
    alert(i++);
}


Contoh kode diatas hampir sama dengan while (i < 3). Kita juga dapat menghilangkan semuanya, dan membuat Infinite Loop:

for (;;) {
    // akan diulangi tanpa batas
}


Perlu di catat bahwasannya dua tanda titik koma ";;" pada statement for harus ada. Jika tidak, maka akan terjadi error.

Menghentikan Loop pada JavaScript

Umumnya, Loop akan ada ketika kondisinya itu salah (false). Tetapi, kita juga dapat langsung menghentikan Loop dengan Directive spesial yaitu break.

Contoh, Loop di bawah ini akan menanyakan angka, jika tidak ada angka yang dimasukkan, maka Loop akan dihentikan:

let jumlah = 0;

while (true) {
    let nilai = +prompt("Masukkan angka", '');

    if (!nilai) break; // (*)

    jumlah += nilai;
}
alert('Jumlah:' + jumlah);


Directive break akan di aktifkan pada baris (*) jika user memasukkan baris kosong atau membatalkan input dan akan langsung menghentikan Loop serta melewati kontrol ke baris pertama setelah loop yaitu alert.

Disini, kombinasi "Infinite Loop + break dibutuhkan" sangat bagus jika terdapat situasi dimana ketika kondisi pada Loop harus di periksa bukan di awal atau di akhir Loop, tetapi di pertengahan atau beberapa tempat dari Body.

continue untuk Iteration Selanjutnya pada JavaScript

Directive continue adalah "versi ringan" dari break. Directive tersebut tidak langsung menghentikan keseluruhan dari Loop. Tetapi hanya mengehentikan Iterasi baru dan mencegah Loop agar tidak menjalankan Iterasi baru lagi (Jika kondisinya mengizinkan).

Kita dapat menggunakannya jika kita sedang berada pada Iteration dan ingin berpindah pada Iteration selanjutnya. Berikut adalah contoh dalam menggunakan Directive continue untuk menghasilkan nilai ganjil:

for (let i = 0; i < 10; i++) {
    // jika benar (true), maka akan melewati beberapa bagian dari body
    if (i % 2 == 0) continue;

    alert(i); // 1, lalu 3, 5, 7, 9
}


Untuk nilai genap dari i, Directive continue akan menghentikan pengeksekusian dari body dan melewati kontrol ke Iteration selanjutnya dari for (dengan angka selanjutnya). Jadi, alert hanya akan menampilkan nilai ganjil.

0 Komentar